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 相关文章推荐
早该知道的7个JavaScript技巧
Mar 27 Javascript
Js操作Select大全(取值、设置选中等等)
Oct 29 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
Nov 30 Javascript
node.js入门实例helloworld详解
Dec 23 Javascript
简单谈谈JavaScript的同步与异步
Dec 31 Javascript
浅谈angular2 组件的生命周期钩子
Aug 12 Javascript
详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
Aug 30 Javascript
vue中子组件的methods中获取到props中的值方法
Aug 27 Javascript
微信小程序公用参数与公用方法用法示例
Jan 09 Javascript
js图片无缝滚动插件使用详解
May 26 Javascript
express中static中间件的具体使用方法
Oct 17 Javascript
详解Vue2的diff算法
Jan 06 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
兼容性比较好的PHP生成缩略图的代码
2011/01/12 PHP
深入浅析PHP无限极分类的案例教程
2016/05/09 PHP
PHP 用session与gd库实现简单验证码生成与验证的类方法
2016/11/15 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
JavaScript 捕获窗口关闭事件
2009/07/26 Javascript
javascript下判断一个元素是否存在的代码
2010/03/05 Javascript
Javascript匿名函数的一种应用 代码封装
2010/06/27 Javascript
jQuery实用基础超详细介绍
2013/04/11 Javascript
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
2013/04/15 Javascript
原生js模拟淘宝购物车项目实战
2015/11/18 Javascript
javascript中eval解析JSON字符串
2016/02/27 Javascript
原生js实现回复评论功能
2017/01/18 Javascript
vue的传参方式汇总和router使用技巧
2018/05/22 Javascript
解决vue中修改了数据但视图无法更新的情况
2018/08/27 Javascript
vue中使用input[type=&quot;file&quot;]实现文件上传功能
2018/09/10 Javascript
js 实现watch监听数据变化的代码
2019/10/13 Javascript
利用PHP实现递归删除链表元素的方法示例
2020/10/23 Javascript
[43:58]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第二局
2016/02/27 DOTA
python检测远程端口是否打开的方法
2015/03/14 Python
仅用50行Python代码实现一个简单的代理服务器
2015/04/08 Python
使用Python的toolz库开始函数式编程的方法
2018/11/15 Python
对python实现二维函数高次拟合的示例详解
2018/12/29 Python
对python 自定义协议的方法详解
2019/02/13 Python
Pandas中DataFrame的分组/分割/合并的实现
2019/07/16 Python
详解python3中用HTMLTestRunner.py报ImportError: No module named 'StringIO'如何解决
2019/08/27 Python
Matplotlib 折线图plot()所有用法详解
2020/07/28 Python
如何在vscode中安装python库的方法步骤
2021/01/06 Python
写出SQL四条最基本的数据操作语句(DML)
2012/12/12 面试题
代码中finally中的代码会不会执行
2012/02/06 面试题
服装电子商务创业计划书
2014/01/30 职场文书
2015教师年度思想工作总结
2015/04/30 职场文书
phpQuery解析HTML乱码问题(补充官网未列出的乱码解决方案)
2021/04/01 PHP
Python 使用dict实现switch的操作
2021/04/07 Python
Python使用protobuf序列化和反序列化的实现
2021/05/19 Python
只用Python就可以制作的简单词云
2021/06/07 Python
python_tkinter弹出对话框创建
2022/03/20 Python