夏日博客

A-A+

JavaScript ajax实现省市区联动例子

2016年01月12日 前端设计 暂无评论 阅读 5 views 次

本文章来为各位介绍一个关于JavaScript ajax实现省市区联动例子,希望这个例子对各位有帮助,总结下自己在项目中做的最多的便是省市区的联动选择了,一种是省市区的样式是三个select框,直接选择,一种是省select框存在，市，区select框动态添加到后面,注意动态添加元素,以及对于未来元素的操作,一种是移动端整个大弹框选择省市区.

可能有的样式,以及实现的过程不太一样,但主要思路都是一样的,有的需要后台先给你省的数据,可以用twig循环出来,再进行其他操作,总体思路就是.

1）后台需写好获取省市区的三个ajax:如

  1. shop_get_province_ajax:  
  2.    
  3. path: /get_res_province_ajax  
  4.    
  5. defaults: { _controller: ShopBundle:ForgetPassword:get_res_province_ajax }  

2）写好前台样式,以下模拟省市区select框：

  1. <div class="mid-box">  
  2.    
  3. <div class="sel120fff fl ml10">  
  4.    
  5. <div class="sel50fffarrow"></div>  
  6.    
  7. <select class="ProvinceSelect sel120" name="res_province_id">  
  8.    
  9. <option value="0">-请选择-</option>  
  10.    
  11. </select>  
  12.    
  13. </div>  
  14.    
  15. <div class="sel120fff fl ml10">  
  16.    
  17. <div class="sel50fffarrow"></div>  
  18.    
  19. <select class="CitySelect sel120" name="res_province_id">  
  20.    
  21. <option value="0">-请选择-</option>  
  22.    
  23. </select>  
  24.    
  25. </div>  
  26.    
  27. <div class="sel120fff fl ml10">  
  28.    
  29. <div class="sel50fffarrow"></div>  
  30.    
  31. <select class="DistrictSelect sel120" name="res_province_id">  
  32.    
  33. <option value="0">-请选择-</option>  
  34.    
  35. </select>  
  36.    
  37. </div>  
  38.    
  39. </div>  

3）默认,页面加载完成,利用省ajax请求省的数据:

  1. var chosetext = "<option value='0'>-请选择-</option>";  
  2.    
  3. $(".CitySelect").append(chosetext);  
  4.    
  5. $(".DistrictSelect").append(chosetext);  
  6.   
  7. $.ajax({  
  8.    
  9. type:"get",  
  10.    
  11. url:"{{path('shop_get_province_ajax' 
  12. )}}",  
  13.    
  14. dataType:"json",  
  15.    
  16. success:function(data){  
  17.    
  18. $(".CitySelect").empty();  
  19.    
  20. $(".DistrictSelect").empty();  
  21.    
  22. $(".CitySelect").append(chosetext);  
  23.    
  24. $(".DistrictSelect").append(chosetext);  
  25.   
  26. var length=data.length;  
  27.    
  28. for(var i=0;i<length;i++){  
  29.    
  30. var region_option = "<option id='finish_region_id_op"+data[i].id+"'value='"+data[i].id+"'>"+data[i].name+"</option>"  
  31.    
  32. $(".ProvinceSelect").append(region_option);  
  33.    
  34. }  
  35. }  
  36.    
  37. });  

4）当省数据选择时,将选择的省的id传送给市的ajax:

  1. // 选择-出现市  
  2. $('.ProvinceSelect').change(function(){  
  3. $(".CitySelect").empty();  
  4. $(".DistrictSelect").empty();  
  5. $(".CitySelect").append(chosetext);  
  6. $(".DistrictSelect").append(chosetext);  
  7.     
  8. var id = $(".ProvinceSelect").val();  
  9. var url= "{{path('shop_get_city_ajax', { 'id': 'text' })}}";  
  10. url = url.replace("text", id);  
  11. $.ajax({  
  12. type:"get",  
  13. url:url,  
  14. data:{region:id},  
  15. dataType:"json",  
  16. success:function(data){  
  17. var length=data.length;  
  18.     
  19. for(var i=0;i<length;i++){  
  20. var city_option = "<option id='origin_city_id_op"+data[i].id+"'value='"+data[i].id+"' >"+data[i].name+"</option>";  
  21. $(".CitySelect").append(city_option);  
  22.     
  23. }  
  24.     
  25. }  
  26. })  
  27.     
  28. });  

5）当区数据选择时，将选择的区的id传送给区的ajax:

  1. // 选择-出现区  
  2. $('.CitySelect').change(function(){  
  3. $(".DistrictSelect").empty();  
  4. $(".DistrictSelect").append(chosetext);  
  5.     
  6. var id = $(".CitySelect").val();  
  7.     
  8. var url = "{{path('shop_get_district_ajax', { 'id': 'text' })}}";  
  9. url = url.replace("text", id);  
  10. $.ajax({  
  11. type:"get",  
  12. url:url,  
  13. data:{city:id},  
  14. dataType:"json",  
  15. success:function(data){  
  16. var length=data.length;  
  17.     
  18. for(var i=0;i<length;i++){  
  19. var xian_option = "<option id='origin_xian_id_op"+data[i].id+"'value='"+data[i].id+"'>"+data[i].name+"</option>"  
  20. $(".DistrictSelect").append(xian_option);  
  21. }  
  22.     
  23. }  
  24. })  
  25. });  
标签：

给我留言