JavaScript ajax實現省市區聯動例子

總結下自己在項目中做的最多的便是省市區的聯動選擇了。

一種是省市區的樣式是三個select框，直接選擇，樣式如下：

 

 

一種是省select框存在，市，區select框動態添加到後面（注意動態添加元素，以及對於未來元素的操作）；

一種是移動端整個大彈框選擇省市區，樣式如下：

 

 

可能有的樣式，以及實現的過程不太一樣，但主要思路都是一樣的。（有的需要後台先給你省的資料，可以用twig迴圈出來，再進行其他動作）

總體思路就是：（1）後台需寫好擷取省市區的三個ajax：如

shop_get_province_ajax:path: /get_res_province_ajaxdefaults: { _controller: ShopBundle:ForgetPassword:get_res_province_ajax }

 

（2）寫好前台樣式(以下類比省市區select框)：

<div class="mid-box"><div class="sel120fff fl ml10"><div class="sel50fffarrow"></div><select class="ProvinceSelect sel120" name="res_province_id"><option value="0">-請選擇-</option></select></div><div class="sel120fff fl ml10"><div class="sel50fffarrow"></div><select class="CitySelect sel120" name="res_province_id"><option value="0">-請選擇-</option></select></div><div class="sel120fff fl ml10"><div class="sel50fffarrow"></div><select class="DistrictSelect sel120" name="res_province_id"><option value="0">-請選擇-</option></select></div></div>

（3）預設，頁面載入完成，利用省ajax請求省的資料：

var chosetext = "<option value='0'>-請選擇-</option>";$(".CitySelect").append(chosetext);$(".DistrictSelect").append(chosetext); $.ajax({type:"get",url:"{{path('shop_get_province_ajax')}}",dataType:"json",success:function(data){$(".CitySelect").empty();$(".DistrictSelect").empty();$(".CitySelect").append(chosetext);$(".DistrictSelect").append(chosetext); var length=data.length;for(var i=0;i<length;i++){var region_option = "<option id='finish_region_id_op"+data[i].id+"'value='"+data[i].id+"'>"+data[i].name+"</option>"$(".ProvinceSelect").append(region_option);} }});

（4）當省資料選擇時，將選擇的省的id傳送給市的ajax:

 // 選擇-出現市$('.ProvinceSelect').change(function(){$(".CitySelect").empty();$(".DistrictSelect").empty();$(".CitySelect").append(chosetext);$(".DistrictSelect").append(chosetext); var id = $(".ProvinceSelect").val();var url= "{{path('shop_get_city_ajax', { 'id': 'text' })}}";url = url.replace("text", id);$.ajax({type:"get",url:url,data:{region:id},dataType:"json",success:function(data){var length=data.length; for(var i=0;i<length;i++){var city_option = "<option id='origin_city_id_op"+data[i].id+"'value='"+data[i].id+"' >"+data[i].name+"</option>";$(".CitySelect").append(city_option); } }}) });

（4）當區資料選擇時，將選擇的區的id傳送給區的ajax:

  // 選擇-出現區$('.CitySelect').change(function(){$(".DistrictSelect").empty();$(".DistrictSelect").append(chosetext); var id = $(".CitySelect").val(); var url = "{{path('shop_get_district_ajax', { 'id': 'text' })}}";url = url.replace("text", id);$.ajax({type:"get",url:url,data:{city:id},dataType:"json",success:function(data){var length=data.length; for(var i=0;i<length;i++){var xian_option = "<option id='origin_xian_id_op"+data[i].id+"'value='"+data[i].id+"'>"+data[i].name+"</option>"$(".DistrictSelect").append(xian_option);} }})});