做的项目有关于城市的二级联动,现在整理下,和大家分享下。
在你自己要操作城市的js中写下一下代码:
js代码:
var jqueryDom = {
$doc : $(document),
$city : $('#city'),
$modal : $('#myModal'),
$modalBody : $('#modalBody'),
$main : $('.micro-main'),
$channelList : $('#microList'),
$province : $('#province'),
$title : $('.check-title'),
$remark : $('#checkRemark')
},chinaDistrict,cityList,page=1;
$(function(){
getCityList();
});
function getCityList(){
$.getJSON('static/js/chinaDistrict.json', function(data) {
var body={data:data};//获取省区
var option = '{@each data as it}<option value="${it.code}">${it.name}</option>{@/each}';
jqueryDom.$province.append(juicer(option,body));
chinaDistrict = data;
});
}
jqueryDom.$doc.on('change','#province',function(){
var cityCode = $(this).val(),i= 0,len=chinaDistrict.length;
if(cityCode==""){
jqueryDom.$city.html('<option value="">所属城市</option>').change();
return ;
}
for(;i<len;i++){
if(chinaDistrict[i].code==cityCode){
cityList = chinaDistrict[i].list;
}
}
var body={data:cityList};
var option = '{@each data as it}<option value="${it.code}">${it.name}</option>{@/each}';
jqueryDom.$city.html(juicer(option,body)).change();
});
其中 #province 表示 html 中 自己的省select下拉框的id,#city表示 html 中自己市区select下拉框的id,html代码如下:
html代码:
<div class="form-group">
<span style="white-space:pre"> </span><label for="province" class="col-sm-3 control-label">区域:</label>
<span style="white-space:pre"> </span><div class="col-sm-3">
<span style="white-space:pre"> </span><!--省-->
<span style="white-space:pre"> </span><select class="form-control" id="province">
<span style="white-space:pre"> </span></select>
<span style="white-space:pre"> </span><!--市-->
</div>
<div class="col-sm-3">
<span style="white-space:pre"> </span><select id="city" class="form-control">
<span style="white-space:pre"> </span> </select>
</div>
<span class="text-danger">*必选</span>
</div>
json文件见附件:(附件不会上传 不然加
QQ:1063872830
将json文件传给需要的伙伴)