小虎博客

A-A+

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

2016年01月13日 编程技术 暂无评论

jquery的省、市、区的ajax的例子小编也介绍过不少了，我们今天再一起来看一个关于ajax省、市、区的例子吧，希望文章能够对各位朋友带来帮助的哦。

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

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

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

页面布局部分代码示例:

  1. <div class="formBoxList fl ml85 mt20 wd250">  
  2. <p class="words fl wd85 tr">所属大区<span>*</span>：</p>  
  3. <select class="fr mt3 bgYellow editDistrictSelect" name="res_region_id">  
  4. <option value="1" data-id="1">华北大区</option>  
  5. <option value="2" data-id="2">东北大区</option>  
  6. <option value="3" data-id="3">华东大区</option>  
  7. <option value="4" data-id="4">华中大区</option>  
  8. <option value="5" data-id="5">华南大区</option>  
  9. <option value="6" data-id="6">西北大区</option>  
  10. <option value="7" data-id="7">西南大区</option>  
  11. </select>  
  12. </div>  
  13.    
  14. <div class="formBoxList fl ml25 mt20 wd275">  
  15.      <p class="words fl wd110 tr">省（直辖市）<span>*</span>：</p>  
  16.      <select class="fr mt3 bgYellow editProvinceSelect" name="res_province_id">                           
  17.      </select>  
  18. </div>  
  19. <div class="formBoxList fl ml75 mt20 wd225">  
  20.      <p class="words fl wd60 tr">市<span>*</span>：</p>  
  21.      <select class="fr mt3 bgYellow editCitySelect" name="res_city_id">                             
  22.      </select>  
  23. </div>  

js处理代码如下:

  1. //修改按钮时 表格弹框出现  
  2. $(".editBtn").click(function(){  
  3.     $(".blackBg,.edit-formBox").show();  
  4.    
  5.     var name = $(this).data("name");  
  6.     var phone = $(this).data("phone");  
  7.     var qq = $(this).data("qq");  
  8.     var email = $(this).data("email");        
  9.    
  10.     var organization = $(this).data("organization");  
  11.     var department = $(this).data("department");  
  12.     var job = $(this).data("job");  
  13.    
  14.     var region_id = $(this).data("regionid");         
  15.     var province_id = $(this).data("provinceid");  
  16.     var city_id = $(this).data("cityid");  
  17.        
  18.     var admin_id = $(this).data("admin_id");  
  19.    
  20.     $(".edit-formBox").find(".editName").val(name);  
  21.     $(".edit-formBox").find(".editPhone").val(phone);  
  22.     $(".edit-formBox").find(".editQq").val(qq);  
  23.     $(".edit-formBox").find(".editEmail").val(email);  
  24.      
  25.     $(".edit-formBox").find(".editOrganization").val(organization);         
  26.     $(".edit-formBox").find(".editDepartment").val(department);  
  27.     $(".edit-formBox").find(".editJob").val(job);  
  28.    
  29.     $(".admin_id").val(admin_id);  
  30.    
  31.     //修改地区  
  32.         var chosetext = "<option value='0'>-请选择-</option>";  
  33.            
  34.         $(".editDistrictSelect").find("option").each(function() {  
  35.             if ($(this).val() == region_id) {  
  36.                 $(this).attr("selected", "selected");   
  37.             }   
  38.         });   
  39.    
  40.         var id = region_id;  
  41.         var url= "{{ path('zm_admin_get_admin_province_ajax', { 'id': 'text' }) }}";  
  42.         url = url.replace("text", id);  
  43.        
  44.         $.ajax({  
  45.             type:"get",  
  46.             url:url,  
  47.             data:{res_region_id:id},  
  48.             dataType:"json",  
  49.             success:function(data){                  
  50.                 var regionid = province_id;      
  51.    
  52.                 var length=data.length;  
  53.                 for(var i=0;i&lt;length;i++){  
  54.                     var region_option = "<option id='finish_region_id_op"+data[i].id+"'value='"+data[i].id+"'>"+data[i].name+"</option>";  
  55.                     $(".editProvinceSelect").append(region_option);  
  56.                     if(regionid==data[i].id){  
  57.                         $("#finish_region_id_op"+data[i].id).attr("selected","selected");  
  58.                     }  
  59.                 }                    
  60.             }        
  61.         });  
  62.    
  63.     $('.editDistrictSelect').change(function(){  
  64.         $(".editProvinceSelect").empty();        
  65.         $(".editProvinceSelect").append(chosetext);  
  66.         $(".editCitySelect").empty();        
  67.         $(".editCitySelect").append(chosetext);  
  68.    
  69.         var id = $(".editDistrictSelect option:selected").data("id");  
  70.         var url= "{{ path('zm_admin_get_admin_province_ajax', { 'id': 'text' }) }}";  
  71.         url = url.replace("text", id);  
  72.        
  73.         $.ajax({  
  74.             type:"get",  
  75.             url:url,  
  76.             data:{res_region_id:id},  
  77.             dataType:"json",  
  78.             success:function(data){                 
  79.                    
  80.                 var length=data.length;  
  81.                 for(var i=0;i&lt;length;i++){  
  82.                     var region_option = "<option id='finish_region_id_op"+data[i].id+"'value='"+data[i].id+"'>"+data[i].name+"</option>";  
  83.                     $(".editProvinceSelect").append(region_option);                     
  84.                 }                    
  85.             }        
  86.         });      
  87.     });  
  88.    
  89.     // 选择-出现市  
  90.     $('.editProvinceSelect').change(function(){  
  91.         $(".editCitySelect").empty();        
  92.         $(".editCitySelect").append(chosetext);       
  93.            
  94.         var id = $(".editProvinceSelect").val();  
  95.         var url= "{{path('zm_shop_get_city_ajax', { 'id': 'text' })}}";  
  96.         url = url.replace("text", id);  
  97.         $.ajax({  
  98.             type:"get",  
  99.             url:url,  
  100.             data:{res_region_id:id},  
  101.             dataType:"json",  
  102.             success:function(data){  
  103.                 var length=data.length;  
  104.    
  105.                 for(var i=0;i&lt;length;i++){  
  106.                      var city_option = "<option id='origin_city_id_op"+data[i].id+"'value='"+data[i].id+"' >"+data[i].name+"</option>";  
  107.                         $(".editCitySelect").append(city_option);  
  108.    
  109.                 }             
  110.    
  111.             }  
  112.         });  
  113.     });  
  114.    
  115.     if($(".editProvinceSelect").text()!=="-请选择-"){         
  116.         var id = province_id;        
  117.         var url= "{{ path('zm_shop_get_city_ajax', { 'id': 'text' }) }}";  
  118.         url = url.replace("text", id);  
  119.         $.ajax({  
  120.             type:"get",  
  121.             url:url,  
  122.             data:{res_region_id:id},  
  123.             dataType:"json",  
  124.             success:function(data){  
  125.                 var length=data.length;  
  126.                 var cityid = city_id;  
  127.    
  128.                 for(var i=0;i&lt;length;i++){  
  129.                     var city_option = "<option id='origin_city_id_op"+data[i].id+"'value='"+data[i].id+"' >"+data[i].name+"</option>";  
  130.                     $(".editCitySelect").append(city_option);  
  131.                     if(cityid==data[i].id){  
  132.                         $("#origin_city_id_op"+data[i].id).attr("selected","selected");  
  133.                     }  
  134.                 }         
  135.    
  136.             }  
  137.         });  
  138.     }  
  139.    
  140. });  

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

  1. <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>  
标签：

给我留言