layui实现三级联动效果


Posted in Javascript onJuly 26, 2019

本文实例为大家分享了layui实现三级联动效果的具体代码,供大家参考,具体内容如下

<html> 
 <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <meta name="renderer" content="webkit"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
  <meta name="apple-mobile-web-app-capable" content="yes"> 
  <meta name="format-detection" content="telephone=no"> 
  <link rel="stylesheet" href="src/css/layui.css" /> 
 </head> 
 <body> 
  <div class="layui-form"> 
   <div class="layui-input-inline"> 
    <select name="province" lay-filter="province" class="province"> 
     <option value="">请选择省</option> 
    </select> 
   </div> 
   <div class="layui-input-inline"> 
    <select name="city" lay-filter="city" disabled> 
     <option value="">请选择市</option> 
    </select> 
   </div> 
   <div class="layui-input-inline"> 
    <select name="area" lay-filter="area" disabled> 
     <option value="">请选择县/区</option> 
    </select> 
   </div> 
  </div> 
 </body> 
 <script type="text/javascript" src="src/layui.js"></script> 
 <script type="text/javascript" src="src/address.js"></script> 
 <script type="text/javascript"> 
  layui.config({ 
   base : "src/" //address.js的路径 
  }).use([ 'layer', 'jquery', "address" ], function() { 
   var layer = layui.layer, $ = layui.jquery, address = layui.address(); 
 
  }); 
 </script> 
<html>

JS:address.js

layui.define(["form","jquery"],function(exports){ 
 var form = layui.form, 
 $ = layui.jquery, 
 Address = function(){}; 
 
 Address.prototype.provinces = function() { 
  //加载省数据 
  var proHtml = '',that = this; 
  $.get("area",{code:'',type:1}, function (pro) {
 
 
   for (var i = 0; i < pro.length; i++) {
    proHtml += '<option value="' + pro[i].code + '">' + pro[i].name + '</option>';
   } 
   //初始化省数据 
   $("select[name=province]").append(proHtml); 
   form.render(); 
   form.on('select(province)', function (proData) {
 
 
    $("select[name=area]").html('<option value="">请选择县/区</option>');
    var value = proData.value;
 
 
 
 
    if (value > 0) {
     $.post('area',{code:value,type:2},function (val) {
      //console.log(val.length) ;
      that.citys(val) ;
     },"json");
     //that.citys(pro[$(this).index() - 1].childs);
 
 
    } else {
     $("select[name=city]").attr("disabled", "disabled");
    }
   });
  },'json');
 }
 
 //加载市数据 
 Address.prototype.citys = function(citys) {
 
 
  var cityHtml = '<option value="">请选择市</option>',that = this; 
  for (var i = 0; i < citys.length; i++) { 
   cityHtml += '<option value="' + citys[i].code + '">' + citys[i].name + '</option>'; 
  } 
  $("select[name=city]").html(cityHtml).removeAttr("disabled"); 
  form.render(); 
  form.on('select(city)', function (cityData) { 
   var value = cityData.value; 
   if (value > 0) {
    $.post('area',{code:value,type:3},function (area) {
     that.areas(area) ;
    },"json");
    //that.areas(citys[$(this).index() - 1].childs);
   } else { 
    $("select[name=area]").attr("disabled", "disabled"); 
   } 
  }); 
 } 
 
 //加载县/区数据 
 Address.prototype.areas = function(areas) { 
  var areaHtml = '<option value="">请选择县/区</option>'; 
  for (var i = 0; i < areas.length; i++) { 
   areaHtml += '<option value="' + areas[i].code + '">' + areas[i].name + '</option>'; 
  } 
  $("select[name=area]").html(areaHtml).removeAttr("disabled"); 
  form.render(); 
 } 
 
 var address = new Address(); 
 exports("address",function(){ 
  address.provinces(); 
 }); 
});

ajax ->PHP 后台

/**
  * 地区三级联动
  */
  public function areaAction(){
   $code = $this->sys_getparam('code' ) ; // 获取省市区数据
   $type = $this->sys_getparam('type' ) ;
   
   if($type==1){ //省
    $sql = "
   SELECT id AS code,province AS name FROM a_province ;
   " ;
   }
   if($type==2){ //市
    $sql = "
   SELECT id AS code,city AS name FROM a_city WHERE province_id= $code ;
   " ;
   }
   if($type==3){ //区
    $sql = "
   SELECT id AS code,district AS name FROM a_district WHERE city_id= $code ;
   " ;
   }
   $areaData = app::dbload($sql,'all');
   echo json_encode($areaData) ;
  }

效果:

layui实现三级联动效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ExtJs GridPanel简单的增删改实现代码
Aug 26 Javascript
Javascript图像处理—平滑处理实现原理
Dec 28 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
May 27 Javascript
批量修改标签css样式以input标签为例
Jul 31 Javascript
js的flv视频播放器插件使用方法
Jun 23 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
Mar 08 Javascript
Javascript农历与公历相互转换的简单实例
Oct 09 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
Nov 02 Javascript
javascript function(函数类型)使用与注意事项小结
Jun 10 Javascript
微信小程序接入腾讯云验证码的方法步骤
Jan 07 Javascript
JS实现分页导航效果
Feb 19 Javascript
浅谈Vue使用Elementui修改默认的最快方法
Dec 05 Vue.js
layui实现三级导航菜单
Jul 26 #Javascript
layui实现左侧菜单点击右侧内容区显示
Jul 26 #Javascript
详解nvm管理多版本node踩坑
Jul 26 #Javascript
layui自定义ajax左侧三级菜单
Jul 26 #Javascript
layui递归实现动态左侧菜单
Jul 26 #Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
Jul 26 #Javascript
bootstrap-table+treegrid实现树形表格
Jul 26 #Javascript
You might like
重置版游戏视频
2020/04/09 魔兽争霸
php设计模式之观察者模式的应用详解
2013/05/21 PHP
php实现点击可刷新验证码
2015/11/07 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
使用PHPUnit进行单元测试并生成代码覆盖率报告的方法
2019/03/08 PHP
jquery 事件执行检测代码
2009/12/09 Javascript
基于jquery的设置页面文本框 只能输入数字的实现代码
2011/04/19 Javascript
js字符编码函数区别分析
2011/12/28 Javascript
Js获取下拉框选定项的值和文本的实现代码
2014/02/26 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
2015/10/10 Javascript
JS简单模拟触发按钮点击功能的方法
2015/11/30 Javascript
js右下角弹出提示框示例代码
2016/01/12 Javascript
JavaScript中的Object对象学习教程
2016/05/20 Javascript
深入理解JavaScript创建对象的多种方式以及优缺点
2017/06/01 Javascript
浅谈node.js 命令行工具(cli)
2018/05/10 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
2018/09/04 Javascript
nodeJS与MySQL实现分页数据以及倒序数据
2020/06/05 NodeJs
[49:12]完美世界DOTA2联赛PWL S2 Magma vs GXR 第二场 11.29
2020/12/02 DOTA
使用python检测手机QQ在线状态的脚本代码
2013/02/10 Python
基于Python数据可视化利器Matplotlib,绘图入门篇,Pyplot详解
2017/10/13 Python
利用python提取wav文件的mfcc方法
2019/01/09 Python
python实现植物大战僵尸游戏实例代码
2019/06/10 Python
详解Python Qt的窗体开发的基本操作
2019/07/14 Python
python中的global关键字的使用方法
2019/08/20 Python
python垃圾回收机制(GC)原理解析
2019/12/30 Python
Python中断多重循环的几种方式详解
2020/02/10 Python
python框架Django实战商城项目之工程搭建过程图文详解
2020/03/09 Python
Web前端绘制0.5像素的几种方法
2017/08/11 HTML / CSS
FILA斐乐中国官方商城:意大利运动品牌
2017/01/25 全球购物
实习老师个人总结的自我评价
2013/09/28 职场文书
党员违纪检讨书
2014/02/18 职场文书
小学生迎国庆演讲稿
2014/09/05 职场文书
李白故里导游词
2015/02/12 职场文书
复活读书笔记
2015/06/29 职场文书
教师节领导致辞
2015/07/29 职场文书
Python办公自动化之Excel(中)
2021/05/24 Python