-
<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>
-
<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="../../../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>
-
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();
-
});
-
});
-
3.address.json的下载地址如下：
一、下载地址
二、下载地址