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函数以及基础写法100多条实用整理
Jan 13 Javascript
js实现遮罩层划出效果是生成div而不是显示
Jul 29 Javascript
深入了解Node.js中的一些特性
Sep 25 Javascript
JavaScript中用getDate()方法返回指定日期的教程
Jun 09 Javascript
JS模拟bootstrap下拉菜单效果实例
Jun 17 Javascript
Ztree新增角色和编辑角色回显问题的解决
Oct 25 Javascript
js实现简单的网页换肤效果
Jan 18 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
Jan 31 Javascript
vue计算属性computed的使用方法示例
Mar 13 Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
Feb 19 Javascript
开发Node CLI构建微信小程序脚手架的示例
Mar 27 Javascript
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
Apr 08 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
JpGraph php柱状图使用介绍
2011/08/23 PHP
php加密解密实用类分享
2014/01/07 PHP
php获取用户浏览器版本的方法
2015/01/03 PHP
PHP使用JSON和将json还原成数组
2015/02/12 PHP
你应该知道PHP浮点数知识
2015/05/13 PHP
PHP获取二叉树镜像的方法
2018/01/17 PHP
通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件
2010/06/18 Javascript
ExtJS 入门
2010/10/29 Javascript
一个基于jquery的文本框记数器
2012/09/19 Javascript
JavaScript window.document的属性、方法和事件小结
2012/10/24 Javascript
一个页面放2段图片滚动代码出现冲突的问题如何解决
2012/12/21 Javascript
使用Post提交时须将空格转换成加号的解释
2013/01/14 Javascript
jQuery替换字符串(实例代码)
2013/11/13 Javascript
Js判断CSS文件加载完毕的具体实现
2014/01/17 Javascript
JS实现往下不断流动网页背景的方法
2015/02/27 Javascript
JavaScript必知必会(二) null 和undefined
2016/06/08 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
2017/02/21 Javascript
jQuery tip提示插件(实例分享)
2017/04/28 jQuery
jQuery之动画ajax事件(实例讲解)
2017/07/18 jQuery
vue-router的hooks用法详解
2020/06/08 Javascript
VUE动态生成word的实现
2020/07/26 Javascript
Vue.js使用axios动态获取response里的data数据操作
2020/09/08 Javascript
Python中字符串的处理技巧分享
2016/09/17 Python
最近Python有点火? 给你7个学习它的理由!
2017/06/26 Python
pytorch学习教程之自定义数据集
2020/11/10 Python
matplotlib事件处理基础(事件绑定、事件属性)
2021/02/03 Python
CSS3区域模块region相关编写示例
2015/08/28 HTML / CSS
使用CSS3美化HTML表单的技巧演示
2016/05/17 HTML / CSS
英国健康和美容技术产品购物网站:CurrentBody
2019/07/17 全球购物
企业读书活动总结
2014/06/30 职场文书
2014最新预备党员思想汇报范文:中国梦,我的梦
2014/10/25 职场文书
初二学生评语大全
2014/12/26 职场文书
Python爬虫入门案例之回车桌面壁纸网美女图片采集
2021/10/16 Python
关于 Python json中load和loads区别
2021/11/07 Python
「地球外少年少女」BD发售宣传CM公开
2022/03/21 日漫
MySQL库表太大怎么办? 数据库分库分表项目实践
2022/04/11 MySQL