【layui】基于 Layui form 组件的省市区级联的实现
演示demo 2017-06-29 09:30:23

前段时间有童鞋在群里面问 Layui form 组件怎么实现？ 今天抽空做了一个demo，希望有需要的同学有帮助哦。
废话不多说了，暴力点，直接贴代码

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">  
  6.     <title>基于 Layui form 组件的省市区级联的实现</title>  
  7.     <link rel="stylesheet" href="plugins/layui/css/layui.css" />  
  8. </head>  
  9. <body>  
  10.     <div style="margin: 50px auto; ">  
  11.         <form class="layui-form">  
  12.             <div class="layui-form-item">  
  13.                 <label class="layui-form-label">选择地区</label>  
  14.                 <div class="layui-input-inline">  
  15.                     <select name="province" lay-filter="province">  
  16.                         <option value="">请选择省</option>  
  17.                     </select>  
  18.                 </div>  
  19.                 <div class="layui-input-inline" style="display: none;">  
  20.                     <select name="city" lay-filter="city">  
  21.                         <option value="">请选择市</option>  
  22.                     </select>  
  23.                 </div>  
  24.                 <div class="layui-input-inline" style="display: none;">  
  25.                     <select name="area" lay-filter="area">  
  26.                         <option value="">请选择县/区</option>  
  27.                     </select>  
  28.                 </div>  
  29.             </div>  
  30.         </form>  
  31.     </div>  
  32.     <script type="text/javascript" src="plugins/layui/layui.js"></script>  
  33.     <script type="text/javascript" src="js/area.js"></script>  
  34.     <script>  
  35.         //初始数据  
  36.         var areaData = Area;  
  37.         var $form;  
  38.         var form;  
  39.         var $;  
  40.         layui.use(['jquery', 'form'], function() {  
  41.             $ = layui.jquery;  
  42.             form = layui.form();  
  43.             $form = $('form');  
  44.             loadProvince();  
  45.         });  
  46.          //加载省数据  
  47.         function loadProvince() {  
  48.             var proHtml = '';  
  49.             for (var i = 0; i < areaData.length; i++) {  
  50.                 proHtml += '<option value="' + areaData[i].provinceCode + '_' + areaData[i].mallCityList.length + '_' + i + '">' + areaData[i].provinceName + '</option>';  
  51.             }  
  52.             //初始化省数据  
  53.             $form.find('select[name=province]').append(proHtml);  
  54.             form.render();  
  55.             form.on('select(province)', function(data) {  
  56.                 $form.find('select[name=area]').html('<option value="">请选择县/区</option>').parent().hide();  
  57.                 var value = data.value;  
  58.                 var d = value.split('_');  
  59.                 var code = d[0];  
  60.                 var count = d[1];  
  61.                 var index = d[2];  
  62.                 if (count > 0) {  
  63.                     loadCity(areaData[index].mallCityList);  
  64.                 } else {  
  65.                     $form.find('select[name=city]').parent().hide();  
  66.                 }  
  67.             });  
  68.         }  
  69.          //加载市数据  
  70.         function loadCity(citys) {  
  71.             var cityHtml = '';  
  72.             for (var i = 0; i < citys.length; i++) {  
  73.                 cityHtml += '<option value="' + citys[i].cityCode + '_' + citys[i].mallAreaList.length + '_' + i + '">' + citys[i].cityName + '</option>';  
  74.             }  
  75.             $form.find('select[name=city]').html(cityHtml).parent().show();  
  76.             form.render();  
  77.             form.on('select(city)', function(data) {  
  78.                 var value = data.value;  
  79.                 var d = value.split('_');  
  80.                 var code = d[0];  
  81.                 var count = d[1];  
  82.                 var index = d[2];  
  83.                 if (count > 0) {  
  84.                     loadArea(citys[index].mallAreaList);  
  85.                 } else {  
  86.                     $form.find('select[name=area]').parent().hide();  
  87.                 }  
  88.             });  
  89.         }  
  90.          //加载县/区数据  
  91.         function loadArea(areas) {  
  92.             var areaHtml = '';  
  93.             for (var i = 0; i < areas.length; i++) {  
  94.                 areaHtml += '<option value="' + areas[i].areaCode + '">' + areas[i].areaName + '</option>';  
  95.             }  
  96.             $form.find('select[name=area]').html(areaHtml).parent().show();  
  97.             form.render();  
  98.             form.on('select(area)', function(data) {  
  99.                 //console.log(data);  
  100.             });  
  101.         }  
  102.     </script>  
  103. </body>  
  104. </html>  

 

本文来自于：http://fly.layui.com/jie/4875/

在线演示 (126)
上一篇 echarts图形统计
下一篇 适合移动端的省市区选择
相关的文章
Powered by yoyo苏ICP备15045725号