ajax省市联动案例 ajax省市区联动【原创】

以前看见过省市区联动的效果，一直不知道是怎么实现的，这次第一次在项目里遇到，就简单记录了一下。下面简单介绍一下。

我实现的省市区联动，省是循环出来的，市的获取是根据省的改变动态添加的，同理，区的获取也是根据市的改变动态添加的。具体代码如下：

省的循环：

{% if data.info_area is defined %}

{% for item in data.info_area %}

{{ item.name }}

{% endfor %}

{% endif %}

获取市：

$(".provinceSelect").change(function(){

$(".citySelect").empty();

$(".districtSelect").empty();

$(".citySelect").append(selectText);

$(".districtSelect").append(selectText);

var provinceId = $(this).val();

var request = $.ajax({

url: '{{ path("frontend_html_city",{province_id:'abcdefgabcdefg'}) }}'.replace('abcdefgabcdefg', provinceId),

data: {},

dataType: "json",

type: "post",

}).done(function(response){

var data = response.cityInfo; console.log(data);

var length = data.length;

for(var i=0;i

var city_option = ""+data[i].name+"";

$(".citySelect").append(city_option);

}

});

});

区的获取：

$(".citySelect").change(function(){

$(".districtSelect").empty();

$(".districtSelect").append(selectText);

var cityId = $(this).val();

var request = $.ajax({

url: '{{ path("frontend_html_district",{city_id:'hfrfhbhrvdeffedc'}) }}'.replace('hfrfhbhrvdeffedc',cityId),

data: {},

dataType: "json",

type: "POST",

}).done(function(response){

console.log(data);

var data = response.districtInfo;

var length = data.length;

for(var i=0;i

var district_option = ""+data[i].name+"";

$(".districtSelect").append(district_option);

}

});

});

转载时请注明出处及相应链接，本文永久地址：/15504.html

微信打赏

支付宝打赏

感谢您对作者erin的打赏，我们会更加努力！如果您想成为作者，请点我