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 相关文章推荐
javascript 类型判断代码分析
Mar 28 Javascript
js用typeof方法判断undefined类型
Jul 15 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
Mar 03 Javascript
js实现图片点击左右轮播
Jul 08 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
Aug 02 Javascript
JavaScript对象封装的简单实现方法(3种方法)
Jan 03 Javascript
Angular2 PrimeNG分页模块学习
Jan 14 Javascript
JS中setTimeout和setInterval的最大延时值详解
Feb 13 Javascript
详解微信小程序Radio选中样式切换
Jul 06 Javascript
垃圾回收器的相关知识点总结
May 13 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
May 29 Javascript
React中使用Vditor自定义图片详解
Dec 25 Javascript
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
PHP下载文件的函数实例代码
2016/05/18 PHP
PHP实现小偷程序实例
2016/10/31 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
一段非常简单的让图片自动切换js代码
2006/11/10 Javascript
offsetParent 算法分析
2010/04/05 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
2013/09/26 Javascript
js监听鼠标事件控制textarea输入字符串的个数
2014/09/29 Javascript
javascript几个易错点记录
2014/11/26 Javascript
JavaScript中的包装对象介绍
2015/01/27 Javascript
JavaScript实现自动变换表格边框颜色
2015/05/08 Javascript
纯javascript移动优先的幻灯片效果
2015/11/02 Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
2015/12/14 Javascript
jQuery选择器用法实例详解
2015/12/17 Javascript
原生js配合cookie制作保存路径的拖拽
2015/12/29 Javascript
JavaScript 消息框效果【实现代码】
2016/04/27 Javascript
JS随机打乱数组的方法小结
2016/06/22 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
2016/12/08 Javascript
零基础轻松学JavaScript闭包
2016/12/30 Javascript
javascript遍历json对象的key和任意js对象属性实例
2017/03/09 Javascript
微信小程序页面间通信的5种方式
2017/03/31 Javascript
vue2.0多条件搜索组件使用详解
2020/03/26 Javascript
jQuery中ajax获取数据赋值给页面的实例
2017/12/31 jQuery
jQuery使用动画队列自定义动画操作示例
2018/06/16 jQuery
webstorm建立vue-cli脚手架的傻瓜式教程
2020/09/22 Javascript
在nuxt中使用路由重定向的实例
2020/11/06 Javascript
python实现维吉尼亚加密法
2019/03/20 Python
Python生成器generator原理及用法解析
2020/07/20 Python
详解python tcp编程
2020/08/24 Python
python获取天气接口给指定微信好友发天气预报
2020/12/28 Python
HTML5画渐变背景图片并自动下载实现步骤
2013/11/18 HTML / CSS
美国高品质个性化珠宝销售网站:Jewlr
2018/05/03 全球购物
实习自我鉴定
2013/12/15 职场文书
教师读书活动总结
2014/05/07 职场文书
高中历史教学反思
2016/02/19 职场文书
看古人们是如何赞美老师的?
2019/07/08 职场文书
30岁前绝不能错过的10本书
2019/08/08 职场文书