《layui从鱼到渔》-编写一个省市区三级联动下拉选择模块
编辑时间:2017-12-19 作者:金满斗 浏览量:3732 来源:layui论坛AggerChen原创

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




来说两句吧