城市三级联动

分享 未结
3 1356
弹出层
弹出层 2017-12-25
悬赏:20飞吻
		    <div class="layui-form-item">
<label class="layui-form-label">省/市</label>
<div class="layui-input-inline">
<select name="drpprovince" id="drpprovince" class="select" lay-verify="required" lay-filter="drpprovince">
<option value="">请选择省</option>
</select>
</div>
<div class="layui-input-inline">
<select id="drpcity" name="drpcity" class="select" lay-verify="required" lay-filter="drpcity">
<option value="">请选择市</option>
</select>
</div>
<div class="layui-input-inline">
<select id="drparea" name="drparea" class="select" lay-verify="required" lay-filter="drparea">
<option value="">请选择县/区</option>
</select>
</div>
</div>
<script>
layui.use('form', function(){
var $ = layui.jquery,
form = layui.form
, layer = layui.layer;
//赋值省
var htmls = '<option value="">请选择省</option>';
for (var i = 0; i < city.length; i++) {
htmls += '<option value = "' + city[i]['provinceCode'] + '">' + city[i]['provinceName'] + '</option>';
};
$("#drpprovince").html(htmls);
form.render('select'); //更新全部
//监听省 drpprovince drpcity drparea
form.on('select(drpprovince)', function(data){
for (var i = 0; i < city.length; i++) {
if(city[i]['provinceCode'] == data.value){
//获取市数据
data = city[i]['mallCityList'];
}
};
var htmls = '<option value="">请选择市</option>';
for (var i = 0; i < data.length; i++) {
htmls += '<option value = "' + data[i]['cityCode'] + '">' + data[i]['cityName'] + '</option>';
};
$("#drpcity").html(htmls);
$("#drparea").html('');//清空县
form.render('select'); //更新全部
});
//监听市 drpprovince drpcity drparea
form.on('select(drpcity)', function(data){
var htmls = '<option value="">请选择县/区</option>';
for (var drpprovince = 0; drpprovince < city.length; drpprovince++) {
for (var drpcity = 0; drpcity < city[drpprovince]['mallCityList'].length; drpcity++) {
if(city[drpprovince]['mallCityList'][drpcity]['cityCode'] == data.value){
for (var drparea = 0; drparea < city[drpprovince]['mallCityList'][drpcity]['mallAreaList'].length; drparea++) {
htmls += '<option value = "' + city[drpprovince]['mallCityList'][drpcity]['mallAreaList'][drparea]['areaCode'] + '">' + city[drpprovince]['mallCityList'][drpcity]['mallAreaList'][drparea]['areaName'] + '</option>';
};
}
}
};
$("#drparea").html(htmls);
form.render('select'); //更新全部
});
//监听提交
form.on('submit(formDemo)', function(data){
layer.msg(JSON.stringify(data.field));
return false;
});
});

</script>
<script type="text/javascript" src="__PUBLIC__/layui/datas/area_data.js"></script>
https://cnd.uploos.com/js/layui/area_data.js
回帖
本帖已设置禁止回复