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);

}

});

});

轉載時請注明出處及相應連結，本文永久位址：https://blog.yayuanzi.com/15504.html

微信打賞

支付寶打賞

感謝您對作者erin的打賞，我們會更加努力！    如果您想成為作者，請點我