jQuery 关于城市的二级联动

做的项目有关于城市的二级联动，现在整理下，和大家分享下。

在你自己要操作城市的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文件传给需要的伙伴)