layui 地区选择
地区编码json数据文件
地区编码邮6位数组成，0-2位省份为编码，2-4位城市为编码，4-6位为县/区编码
根据这个规律，当选择完一项时，匹配出下一项的选项，完成三级联动
以下为layui 与 thinkphp模版页面代码
demo
<html>
<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no" />
<!-- https -->
{if condition="is_https() eq true"}<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />{/if}
<title>用户地址编辑</title>
<script type="text/javascript" src="/public/static/tool/jquery.2.1.4.min.js"></script>
<link rel="stylesheet" href="/public/static/tool/layui-v2.8.4/css/layui.css" />
<script type="text/javascript" src="/public/static/tool/layui-v2.8.4/layui.js"></script>
<script type="text/javascript" src="/public/static/tool/area.js"></script>
<style type="text/css">
.box{padding:15px;}
.layui-form-label{padding-right:0px;}
.right_nav{display:none;}
</style>
</head>
<body>
<div class="box">
<form class="layui-form" action="">
<input type="hidden" name="action" value="{$action}" />
<div class="layui-form-item">
<label class="layui-form-label">姓名</label>
<div class="layui-input-block">
<input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="username layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">手机号</label>
<div class="layui-input-block">
<input type="text" name="phone" lay-verify="required|phone" placeholder="请输入" autocomplete="off" class="phone layui-input">
</div>
</div>
<input type="hidden" name="code" class="code" value="" />
<div class="layui-form-item">
<label class="layui-form-label">选择地区</label>
<div class="layui-input-block">
<div class="layui-input-inline">
<select class="province" lay-filter="province" lay-verify="required">
<option value="">请选择省</option>
</select>
</div>
<div class="layui-input-inline">
<select class="city" lay-filter="city" lay-verify="required">
<option value="">请选择市</option>
</select>
</div>
<div class="layui-input-inline">
<select class="county" lay-filter="county" lay-verify="required">
<option value="">请选择县/区</option>
</select>
</div>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">祥细地址</label>
<div class="layui-input-block">
<textarea placeholder="请输入内容" name="address" class="address layui-textarea" lay-verify="required"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="submit" class="layui-btn" lay-submit lay-filter="submit">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
<script>
var form = layui.form;
//设置省
function setProvince(){
var province_list = areaList.province_list;
html = '<option value="">请选择省</option>';
$.each(province_list,function(key,item){
html += '<option value="'+key+'">'+item+'</option>';
});
$('.province').html(html);
}
setProvince();
//设置市
//code 编码
function setCity(code){
var city_list = areaList.city_list;
var code = code.substring(0,2);
var html = '<option value="">请选择市</option>';
var patt = new RegExp('^'+code+'[0-9]{4}$');
$.each(city_list,function(key,item){
if(patt.test(key)){
html += '<option value="'+key+'">'+item+'</option>';
}
});
$('.city').html(html);
$('.county').html('<option value="">请选择县/区</option>');
form.render();
}
//设置县
//code 编码
function setCounty(code){
var city_list = areaList.county_list;
var code = code.substring(0,4);
var html = '<option value="">请选择县/区</option>';
var patt = new RegExp('^'+code+'[0-9]{2}$');
$.each(city_list,function(key,item){
if(patt.test(key)){
html += '<option value="'+key+'">'+item+'</option>';
}
});
$('.county').html(html);
form.render();
}
//默认设置
function areaDef(){
var code = '{$address.code}';
setCity(code);
setCounty(code);
$('.code').val(code);
$('.username').val(`{$address.username}`);
$('.phone').val(`{$address.phone}`);
$('.address').val(`{$address.address}`);
proCode = code.substring(0,2)+'0000';
citCode = code.substring(0,4)+'00';
$('.province').find('option[value="'+proCode+'"]').prop('selected', true);
$('.city').find('option[value="'+citCode+'"]').prop('selected', true);
$('.county').find('option[value="'+code+'"]').prop('selected', true);
form.render();
}
{if $action == 'edit'}
areaDef();
{/if}
//选择省
form.on('select(province)', function(item){
var code = item.value;
setCity(code);
});
//选择市
form.on('select(city)', function(item){
var code = item.value;
setCounty(code);
});
//选择县
form.on('select(county)', function(item){
var code = item.value;
$('.code').val(code); //最终地区编码
});
// 提交事件
form.on('submit(submit)', function(data){
var field = data.field;
//地区文本
var province = $('.province').next().find('input').val()+' ';
var city = $('.city').next().find('input').val()+' ';
var county = $('.county').next().find('input').val()+' ';
field.areaText = province+city+county;
$.ajax({
url:'/index/user/setAddress',
type: 'POST',
data:field,
dataType:'json',
beforeSend: function (){
loading = layer.load(0,{shade:0.1});
},
success : function(res){
layer.close(loading);
if(res.sta == 1){
layer.msg(res.msg,{time:1000,icon:1},function(){
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index); //再执行关闭
parent.window.location.reload();
});
}else{
layer.alert(res.msg,{icon:0});
}
},
error:function(){
layer.close(loading);
layer.alert('请求出错',{icon:0});
}
});
return false; // 阻止默认 form 跳转
});
</script>
</body>
</html>