layui论坛AggerChen发的,我整理一下,方便以后使用。以后用起来确实就方便了。
html界面
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>省市区三级联动下拉选择模块</title> <link rel="stylesheet" href="lib/layui/css/layui.css" /> <script src="lib/layui/layui.js"></script> <script src="js/city.js"></script> </head> <body> <form class="layui-form"> <div id="selectId" class="layui-form-item"></div> </form> <script type="text/javascript"> layui.config({base: './lib/modsLayui/'}).use('citySelect', function() { //与引用其他原始模块一样,引入citySelect模块 var $ = layui.jquery, citySelect = layui.citySelect; var regionArr =[]; //初始化 citySelect.render({ id:'addRegion', elem: '#selectId', //url:"js/city.js", data:aadata, //method:'post', lableName:'请选择', //自定义表单名称 默认:'行政区域' //search:false, //是否开启输入查询 默认:true //required:true, //是否必选 默认:false msg:'[药店]角色根据所选择连锁决定', //模块下的提示信息 默认:null selectedArr:regionArr, //默认选中数组 默认:[] where:{}, response: { statusName: 'resultCode', statusCode: 0, msgName: 'msg', dataName: 'result' }, filed:{ area:true, //是否启用区 regionId:'regionId', regionName:'regionName', provinceName: "province", //默认省份名称 cityName : "city", //默认城市名称 areaName : "area", //默认区县名称 }, done:function(res){ //成功回调函数 console.log('ok'); }, error:function(res,e,m){ //失败回调函数 } }); }); </script> </body> </html>
关键js不贴了,字数限制,搞个例子链接吧
http://blog.jvbaopeng.com/demo/citySelect.html