jQuery 关于城市的二级联动

最新推荐文章于 2023-05-27 23:48:40 发布

我喂自己袋盐3178

最新推荐文章于 2023-05-27 23:48:40 发布

阅读量778

点赞数 1

分类专栏： jQuery 文章标签： jQuery 联动城市 json

本文链接：https://blog.csdn.net/For_My_Own_Voice/article/details/49129977

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

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