基於jquery的省、市、區的ajax應用例子

相信前端應該都會有用過或聽過省市區聯動ajax，我之前雖然有聽過，但這也是第一次在項目裡碰到，所以整理一下自己的應用和總結。

首先是基礎的沒有預設值，提供給使用者選擇的省市區下拉式功能表，相信這種應該是最易理解的，這裡就不再贅述。接下來就說一下我在項目裡碰到的省市區ajax的應用：

在項目裡我需要在一個彈框中編輯使用者資訊，其中就包括大區、省、市資訊（這也是類似省市區聯動的處理方法）。這時我需要在點擊編輯按鈕時將使用者的基本資料通過data-*資料傳給彈框頁面，在彈框頁面中需要將資訊顯示出來。所以在值傳過來之後我要通過判斷傳來的大區值是否和已有的值（資料庫中的值或者是頁面寫死固定的值）一致，若有我就需要將對應的值顯示在彈框頁面，省、市也類似。代碼如下：
頁面配置部分程式碼範例：

<div class="formBoxList fl ml85 mt20 wd250">
<p class="words fl wd85 tr">所屬大區<span>*</span>：</p>
<select class="fr mt3 bgYellow editDistrictSelect" name="res_region_id">
<option value="1" data-id="1">華北大區</option>
<option value="2" data-id="2">東北大區</option>
<option value="3" data-id="3">華東大區</option>
<option value="4" data-id="4">華中大區</option>
<option value="5" data-id="5">華南大區</option>
<option value="6" data-id="6">西北大區</option>
<option value="7" data-id="7">西南大區</option>
</select>
</div>
 
<div class="formBoxList fl ml25 mt20 wd275">
     <p class="words fl wd110 tr">省（直轄市）<span>*</span>：</p>
     <select class="fr mt3 bgYellow editProvinceSelect" name="res_province_id">                        
     </select>
</div>
<div class="formBoxList fl ml75 mt20 wd225">
     <p class="words fl wd60 tr">市<span>*</span>：</p>
     <select class="fr mt3 bgYellow editCitySelect" name="res_city_id">                          
     </select>
</div>

js處理代碼如下：

//修改按鈕時 表格彈框出現
$(".editBtn").click(function(){
    $(".blackBg,.edit-formBox").show();
 
    var name = $(this).data("name");
    var phone = $(this).data("phone");
    var qq = $(this).data("qq");
    var email = $(this).data("email");     
 
    var organization = $(this).data("organization");
    var department = $(this).data("department");
    var job = $(this).data("job");
 
    var region_id = $(this).data("regionid");      
    var province_id = $(this).data("provinceid");
    var city_id = $(this).data("cityid");
    
    var admin_id = $(this).data("admin_id");
 
    $(".edit-formBox").find(".editName").val(name);
    $(".edit-formBox").find(".editPhone").val(phone);
    $(".edit-formBox").find(".editQq").val(qq);
    $(".edit-formBox").find(".editEmail").val(email);
  
    $(".edit-formBox").find(".editOrganization").val(organization);      
    $(".edit-formBox").find(".editDepartment").val(department);
    $(".edit-formBox").find(".editJob").val(job);
 
    $(".admin_id").val(admin_id);
 
    //修改地區
        var chosetext = "<option value='0'>-請選擇-</option>";
        
        $(".editDistrictSelect").find("option").each(function() {
            if ($(this).val() == region_id) {
                $(this).attr("selected", "selected");
            }
        });
 
        var id = region_id;
        var url= "{{ path('zm_admin_get_admin_province_ajax', { 'id': 'text' }) }}";
        url = url.replace("text", id);
    
        $.ajax({
            type:"get",
            url:url,
            data:{res_region_id:id},
            dataType:"json",
            success:function(data){               
                var regionid = province_id;   
 
                var length=data.length;
                for(var i=0;i&lt;length;i++){
                    var region_option = "<option id='finish_region_id_op"+data[i].id+"'value='"+data[i].id+"'>"+data[i].name+"</option>";
                    $(".editProvinceSelect").append(region_option);
                    if(regionid==data[i].id){
                        $("#finish_region_id_op"+data[i].id).attr("selected","selected");
                    }
                }                 
            }     
        });
 
    $('.editDistrictSelect').change(function(){
        $(".editProvinceSelect").empty();     
        $(".editProvinceSelect").append(chosetext);
        $(".editCitySelect").empty();     
        $(".editCitySelect").append(chosetext);
 
        var id = $(".editDistrictSelect option:selected").data("id");
        var url= "{{ path('zm_admin_get_admin_province_ajax', { 'id': 'text' }) }}";
        url = url.replace("text", id);
    
        $.ajax({
            type:"get",
            url:url,
            data:{res_region_id:id},
            dataType:"json",
            success:function(data){              
                
                var length=data.length;
                for(var i=0;i&lt;length;i++){
                    var region_option = "<option id='finish_region_id_op"+data[i].id+"'value='"+data[i].id+"'>"+data[i].name+"</option>";
                    $(".editProvinceSelect").append(region_option);                  
                }                 
            }     
        });   
    });
 
    // 選擇-出現市
    $('.editProvinceSelect').change(function(){
        $(".editCitySelect").empty();     
        $(".editCitySelect").append(chosetext);    
        
        var id = $(".editProvinceSelect").val();
        var url= "{{path('zm_shop_get_city_ajax', { 'id': 'text' })}}";
        url = url.replace("text", id);
        $.ajax({
            type:"get",
            url:url,
            data:{res_region_id:id},
            dataType:"json",
            success:function(data){
                var length=data.length;
 
                for(var i=0;i&lt;length;i++){
                     var city_option = "<option id='origin_city_id_op"+data[i].id+"'value='"+data[i].id+"' >"+data[i].name+"</option>";
                        $(".editCitySelect").append(city_option);
 
                }          
 
            }
        });
    });
 
    if($(".editProvinceSelect").text()!=="-請選擇-"){      
        var id = province_id;     
        var url= "{{ path('zm_shop_get_city_ajax', { 'id': 'text' }) }}";
        url = url.replace("text", id);
        $.ajax({
            type:"get",
            url:url,
            data:{res_region_id:id},
            dataType:"json",
            success:function(data){
                var length=data.length;
                var cityid = city_id;
 
                for(var i=0;i&lt;length;i++){
                    var city_option = "<option id='origin_city_id_op"+data[i].id+"'value='"+data[i].id+"' >"+data[i].name+"</option>";
                    $(".editCitySelect").append(city_option);
                    if(cityid==data[i].id){
                        $("#origin_city_id_op"+data[i].id).attr("selected","selected");
                    }
                }      
 
            }
        });
    }
 
});

為了看得更清楚，再貼上一段data-*傳值的代碼：

<a class="editBtn fl ml20 mt5" style="float: left; margin-left: 20px;margin-right: 10px;" href="javascript:;" data-name="{{item.name }}" data-phone="{{item.phone }}" data-qq="{{item.qq }}" data-email="{{item.email }}" data-cityid="{{ item.city_id }}" data-provinceid="{{ item.province_id }}" data-regionid="{{item.region_id }}" data-region="{{item.region_name }}" data-province="{{item.province_name }}" data-city="{{item.city_name }}" data-organization="{{item.organization }}" data-department="{{item.department }}" data-job="{{item.job }} " data-admin_id ="{{ item.admin_id }}">編輯</a>