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文件傳給需要的夥伴)