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 相关文章推荐
js 阻止子元素响应父元素的onmouseout事件具体实现
Dec 23 Javascript
JQuery实现样式设置、追加、移除与切换的方法
Jun 11 Javascript
jquery实现手机号码选号的方法
Jul 31 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
Oct 20 Javascript
基于js实现的限制文本框只可以输入数字
Dec 05 Javascript
AngularJS中的缓存使用
Jan 11 Javascript
js实现水平滚动菜单导航
Jul 21 Javascript
node.js中express模块创建服务器和http模块客户端发请求
Mar 06 Javascript
layui 富文本编辑器和textarea值的相互传递方法
Sep 18 Javascript
Node.js操作MongoDB数据库实例分析
Jan 19 Javascript
微信小程序实现点击导航条切换页面
Nov 19 Javascript
原生JS实现京东查看商品点击放大
Dec 21 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
单位速度在实战中的运用
2020/03/04 星际争霸
php adodb分页实现代码
2009/03/19 PHP
PHP根据传来的16进制颜色代码自动改变背景颜色
2014/06/13 PHP
PHP获取当前所在目录位置的方法
2014/11/26 PHP
浅谈PHP中的那些魔术常量
2020/12/02 PHP
JavaScript对象模型-执行模型
2008/04/28 Javascript
Javascript/Jquery——简单定时器的多种实现方法
2013/07/03 Javascript
如何使用Javascript正则表达式来格式化XML内容
2013/07/04 Javascript
js校验表单后提交表单的三种方法总结
2014/02/28 Javascript
Jquery焦点与失去焦点示例应用
2014/06/10 Javascript
将页面table内容与样式另存成excel文件的方法
2015/08/05 Javascript
在Html中使用Requirejs进行模块化开发实例详解
2016/04/15 Javascript
canvas轨迹回放功能实现
2017/12/20 Javascript
使用node.js实现微信小程序实时聊天功能
2018/08/13 Javascript
详解Vue 全局变量,局部变量
2019/04/17 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
2019/06/13 Javascript
微信小程序自定义单项选择器样式
2019/07/25 Javascript
Vue 自定义指令实现一键 Copy功能
2019/09/16 Javascript
Nodejs实现图片上传、压缩预览、定时删除功能
2019/10/25 NodeJs
es6函数之尾调用优化实例分析
2020/04/25 Javascript
Postman环境变量全局变量使用方法详解
2020/08/13 Javascript
jquery实现简单每周轮换的日历
2020/09/10 jQuery
在Django的模型中执行原始SQL查询的方法
2015/07/21 Python
Python爬虫实战之12306抢票开源
2019/01/24 Python
详解python持久化文件读写
2019/04/06 Python
Python实现的银行系统模拟程序完整案例
2019/04/12 Python
Tensorflow读取并输出已保存模型的权重数值方式
2020/01/04 Python
浅谈Python的方法解析顺序(MRO)
2020/03/05 Python
python向xls写入数据(包括合并,边框,对齐,列宽)
2021/02/02 Python
Ray-Ban雷朋美国官网:全球领先的太阳眼镜品牌
2016/07/20 全球购物
澳大利亚婴儿喂养品牌:Cherub Baby
2018/11/01 全球购物
怎样写好自我评价呢?
2014/02/16 职场文书
教师求职信
2014/06/17 职场文书
煤矿开采专业求职信
2014/07/08 职场文书
迟到检讨书2000字(精选篇)
2014/10/07 职场文书
公司股东出资证明书
2014/11/01 职场文书