layui怎么实现三级联动

互联网 20-11-20

layui实现三级联动的方法：首先创建html的页面；然后创建【address.js】文件，内容为“Address.prototype.provinces = function(){...}”；最后通过layui模块实现三级联动即可。

基于layui的三级联动模块

1.html的页面代码如下：

<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="../../../layui-v2.1.5/css/layui.css" /> 	</head> 	<body> 		<p class="layui-form"> 			<p class="layui-input-inline"> 				<select name="province" lay-filter="province" class="province"> 					<option value="">请选择省</option> 				</select> 			</p> 			<p class="layui-input-inline"> 				<select name="city" lay-filter="city" disabled> 					<option value="">请选择市</option> 				</select> 			</p> 			<p class="layui-input-inline"> 				<select name="area" lay-filter="area" disabled> 					<option value="">请选择县/区</option> 				</select> 			</p> 		</p> 	</body> 	<script type="text/javascript" src="../../../layui-v2.1.5/layui.js"></script> 	<script type="text/javascript" src="address.js"></script> 	<script type="text/javascript"> 		layui.config({ 			base : "../../../js/" //address.js的路径 		}).use([ 'layer', 'jquery', "address" ], function() { 			var layer = layui.layer, $ = layui.jquery, address = layui.address();  		}); 	</script> <html>

2.address.js的代码入下：

ps:需要注意的有：	$.get("address.json", function (data) {} 的地址为json地址，地址不对会报异常。 layui.define(["form","jquery"],function(exports){     var form = layui.form,     $ = layui.jquery,     Address = function(){};      Address.prototype.provinces = function() {         //加载省数据         var proHtml = '',that = this;         $.get("address.json", function (data) {             for (var i = 0; i < data.length; i++) {                 proHtml += '<option value="' + data[i].code + '">' + data[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) {                     that.citys(data[$(this).index() - 1].childs);                 } else {                     $("select[name=city]").attr("disabled", "disabled");                 }             });         })     }      //加载市数据     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) {                 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();     }); });