首页>>表单>>移动端的城市-区县联动(2019-05-09)

移动端的城市-区县联动

本站之前已经发布过类似的代码，每个展示方式都不是同的，可以试试搜索联动查看全部相关代码

移动端的城市-区县联动
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <form class="store-info-form info-form-page">  
  2. <div class="li-title">  
  3. <h3>城市-区县联动</h3>  
  4. </div>  
  5. <div class="form-item">  
  6. <label class="input-group">  
  7. 城市 : <span class="n-msg n-msg-city required-tip">(必填项)</span>  
  8. </label>  
  9. <div class="controls controls-store controls-city">  
  10. <div class="city-wrapper">  
  11. <input type="text" id="city" name="city" class="current-city" readonly placeholder="请选择">  
  12. <i class="icon-down"></i>  
  13. </div>  
  14. <div class="area-wrapper">  
  15. <input type="text" id="district" name="district" class="current-area" readonly placeholder="请选择">  
  16. <i class="icon-down"></i>  
  17. </div>  
  18. </div>  
  19. </div>  
  20. <div class="masker hidden"></div>  
  21. <div class="city-box hidden">  
  22. <section class="express-city-box">  
  23. <div class="hot-city-title">  
  24. <i></i>  
  25. <h4>热门城市</h4>  
  26. </div>  
  27. <div id="city-sidaber" class="city-sidaber">  
  28. <p>A</p><p>B</p><p>C</p><p>D</p><p>E</p><p>F</p><p>G</p><p>H</p><p>J</p><p>K</p><p>L</p><p>M</p><p>N</p><p>P</p><p>Q</p><p>R</p><p>S</p><p>T</p><p>W</p><p>X</p><p>Y</p><p>Z</p>  
  29. </div>  
  30. <div class="hot-city">  
  31. <div class="hot">  
  32. <a data-value="北京市">北京</a>  
  33. <a data-value="上海市">上海</a>  
  34. <a data-value="南京市">南京</a>  
  35. <a data-value="广州市">广州</a>  
  36. </div>  
  37. </div>  
  38. <article id="cityBox" class="wrapper">  
  39. <section class="content">  
  40. </section>  
  41. </article>  
  42. </section>  
  43. </div>  
  44. <div class="area-box hidden">  
  45. <div class="hot-city-title">  
  46. <i></i>  
  47. <h4>区/县</h4>  
  48. </div>  
  49. <ul class="citylist">  
  50. <li class="cityitem" values="朝阳区">朝阳区</li>  
  51. </ul>  
  52. </div>  
  53. </form>  

 

JavaScript Code
  1. <script>  
  2.     var options = {  
  3.         scrollY: true, // 因为scrollY默认为true，其实可以省略  
  4.         scrollX: true,  
  5.         mouseWheel: true,  
  6.         click: true  
  7.     }  
  8.     var wrapper = document.querySelector('.wrapper');  
  9.     var scroll = new BScroll(wrapper, options);  
  10.     // 城市选择  
  11.     $('input[name="city"]').on('click',function(){  
  12.         $('.city-box').slideDown(500,function(){  
  13.             scroll.refresh();  
  14.         });  
  15.         $('.masker').removeClass('hidden');  
  16.     })   
  17.   
  18.     $('.masker').on('click', function(){  
  19.         $('.masker').addClass('hidden');  
  20.         $('.city-box').slideUp(500);  
  21.         $('.area-box').slideUp(500);  
  22.     })  
  23.     $('.city-box .content').on('click', 'li',  function(e){  
  24.         $('input[name="city"]').val(e.target.innerHTML);  
  25.         $('input[name="district"]').val('');  
  26.         $('.city-box').slideUp(500);  
  27.         $('.masker').addClass('hidden');  
  28.     })  
  29.   
  30.     $('.hot-city').on('click', 'a',  function(e){  
  31.         $(this).addClass('active');  
  32.         var hotValue = $(this).attr('data-value');  
  33.         $('input[name="city"]').val(hotValue);  
  34.         $('input[name="district"]').val('');  
  35.         $('.city-box').slideUp(500, function(){  
  36.             $('.hot-city a').removeClass('active');          
  37.         });  
  38.         $('.masker').addClass('hidden');  
  39.     })  
  40.   
  41.     $('.city-sidaber').on('click',function(e){  
  42.         var value = e.target.innerHTML;  
  43.         var alphabet = $('.letter-title');  
  44.         alphabet.map(function(i,item){  
  45.             if(item.innerHTML == value){  
  46.                 scroll.scrollToElement(item);  
  47.             }  
  48.         })  
  49.     })  
  50.   
  51.     $('input[name="district"]').on('click',function(){  
  52.         var preValue = $('input[name="city"]').val();  
  53.         if(preValue){  
  54.             traverseArea(preValue);  
  55.             $('.area-box').slideDown(500);  
  56.             $('.masker').removeClass('hidden');  
  57.         }  
  58.     })   
  59.   
  60.     $('.citylist').on('click', 'li',  function(e){  
  61.         $('input[name="district"]').val(e.target.innerHTML);  
  62.         $('.n-msg-city').removeClass('tip-active').text("(必填项)");  
  63.         $('.area-box').slideUp(500);  
  64.         $('.masker').addClass('hidden');  
  65.     })  
  66. </script>  

 


原文地址:http://www.freejs.net/article_biaodan_767.html