基于jquery的省、市、区的ajax应用例子

相信前端应该都会有用过或听过省市区联动ajax，我之前虽然有听过，但这也是第一次在项目里碰到，所以整理一下自己的应用和总结。

首先是基础的没有默认值，提供给用户选择的省市区下拉菜单，相信这种应该是最易理解的，这里就不再赘述。接下来就说一下我在项目里碰到的省市区ajax的应用：

在项目里我需要在一个弹框中编辑用户信息，其中就包括大区、省、市信息（这也是类似省市区联动的处理方法）。这时我需要在点击编辑按钮时将用户的基本信息通过data-*数据传给弹框页面，在弹框页面中需要将信息显示出来。所以在值传过来之后我要通过判断传来的大区值是否和已有的值（数据库中的值或者是页面写死固定的值）一致，若有我就需要将对应的值显示在弹框页面，省、市也类似。代码如下：
页面布局部分代码示例：

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 = "-请选择-";
        
        $(".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<length;i++){
                    var region_option = ""+data[i].name+"";
                    $(".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<length;i++){
                    var region_option = ""+data[i].name+"";
                    $(".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<length;i++){
                     var city_option = ""+data[i].name+"";
                        $(".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<length;i++){
                    var city_option = ""+data[i].name+"";
                    $(".editCitySelect").append(city_option);
                    if(cityid==data[i].id){
                        $("#origin_city_id_op"+data[i].id).attr("selected","selected");
                    }
                }      
 
            }
        });
    }
 
});

为了看得更清楚，再贴上一段data-*传值的代码：

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 }}">编辑