JS 城市选择实现——按级选中省市县/区

来自网络：

https://www.sunzhongwei.com/js-provinces-three-level-linkage-selection-component?from=sidebar_new

效果图

实现

项目结构

city.js

http://iyenn.com/rec/1648190.html

index.html

  1. html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>地址选择title>
  6.     <link rel="stylesheet" href="style.css">
  7. head>
  8. <body>
  9. <div>
  10.     <fieldset>
  11.         <form action="#">
  12.             <label for="addr-show">您选择的是：
  13.                 <input type="text" value="" id="addr-show">
  14.             label>
  15.             <br/>
  16.  
  17.             
  18.             <select id="prov" onchange="showCity(this)">
  19.                 <option>=请选择省份=option>
  20.  
  21.             select>
  22.  
  23.             
  24.             <select id="city" onchange="showCountry(this)">
  25.                 <option>=请选择城市=option>
  26.             select>
  27.  
  28.             
  29.             <select id="country" onchange="selecCountry(this)">
  30.                 <option>=请选择县区=option>
  31.             select>
  32.             <button type="button" class="btn met1" onClick="showAddr()" id="button-show" >确定button>
  33.         form>
  34.     fieldset>
  35. div>
  36.  
  37. <script src="city.js">script>
  38. <script src="method.js">script>
  39.  
  40. body>
  41. html>

method.js 

  1. //****************针对第二种方式的具体js实现部分******************//
  2. //****************所使用的数据是city.js******************//
  3.  
  4. /*根据id获取对象*/
  5. function $(str) {
  6.     return document.getElementById(str);
  7. }
  8.  
  9. var addrShow02 = $('addr-show02');  //最终地址显示框
  10. var titleWrap = $('title-wrap').getElementsByTagName('LI');
  11. var addrWrap = $('addr-wrap');   //省市区显示模块
  12. var btn2 = document.getElementsByClassName('met2')[0];  //确定按钮
  13.  
  14. var current2 = {
  15.     prov: '',
  16.     city: '',
  17.     country: '',
  18.     provVal: '',
  19.     cityVal: '',
  20.     countryVal: ''
  21. };
  22.  
  23. /*自动加载省份列表*/
  24. window.onload = showProv2();
  25.  
  26. function showProv2() {
  27.     addrWrap.innerHTML = '';
  28.     /*addrShow02.value = '';*/
  29.     btn2.disabled = true;
  30.     titleWrap[0].className = 'titleSel';
  31.     var len = provice.length;
  32.     for (var i = 0; i < len; i++) {
  33.         var provLi = document.createElement('li');
  34.         provLi.innerText = provice[i]['name'];
  35.         provLi.index = i;
  36.         addrWrap.appendChild(provLi);
  37.     }
  38. }
  39.  
  40. /*************************需要给动态生成的li绑定点击事件********************** */
  41. addrWrap.onclick = function (e) {
  42.     var n;
  43.     var e = e || window.event;
  44.     var target = e.target || e.srcElement;
  45.     if (target && target.nodeName == 'LI') {
  46.         /*先判断当前显示区域显示的是省市区的那部分*/
  47.         for (var z = 0; z < 3; z++) {
  48.             if (titleWrap[z].className == 'titleSel')
  49.                 n = z;
  50.         }
  51.         /*显示的处理函数*/
  52.         switch (n) {
  53.             case 0:
  54.                 showCity2(target.index);
  55.                 break;
  56.             case 1:
  57.                 showCountry2(target.index);
  58.                 break;
  59.             case 2:
  60.                 selectCountry(target.index);
  61.                 break;
  62.             default:
  63.                 showProv2();
  64.         }
  65.     }
  66. };
  67.  
  68. /*选择省份之后显示该省下所有城市*/
  69. function showCity2(index) {
  70.     addrWrap.innerHTML = '';
  71.     current2.prov = index;
  72.     current2.provVal = provice[index].name;
  73.     titleWrap[0].className = '';
  74.     titleWrap[1].className = 'titleSel';
  75.     var cityLen = provice[index].city.length;
  76.     for (var j = 0; j < cityLen; j++) {
  77.         var cityLi = document.createElement('li');
  78.         cityLi.innerText = provice[index].city[j].name;
  79.         cityLi.index = j;
  80.         addrWrap.appendChild(cityLi);
  81.     }
  82. }
  83.  
  84. /*选择城市之后显示该城市下所有县区*/
  85. function showCountry2(index) {
  86.     addrWrap.innerHTML = '';
  87.     current2.city = index;
  88.     current2.cityVal = provice[current2.prov].city[index].name;
  89.     titleWrap[1].className = '';
  90.     titleWrap[2].className = 'titleSel';
  91.     var countryLen = provice[current2.prov].city[index].districtAndCounty.length;
  92.     if (countryLen == 0) {
  93.         addrShow02.value = current2.provVal + '-' + current2.cityVal;
  94.     }
  95.     for (var k = 0; k < countryLen; k++) {
  96.         var cityLi = document.createElement('li');
  97.         cityLi.innerText = provice[current2.prov].city[index].districtAndCounty[k];
  98.         cityLi.index = k;
  99.         addrWrap.appendChild(cityLi);
  100.     }
  101. }
  102.  
  103. /*选中具体的县区*/
  104. function selectCountry(index) {
  105.     btn2.disabled = false;
  106.     current2.country = index;
  107.     addrWrap.getElementsByTagName('li')[index].style.backgroundColor = '#23B7E5';
  108.     current2.countryVal = provice[current2.prov].city[current2.city].districtAndCounty[index];
  109. }
  110.  
  111. /*点击确定后恢复成初始状态，且将所选地点显示在输入框中*/
  112. btn2.onclick = function () {
  113.     addrShow02.value = current2.provVal + ' ' + current2.cityVal + ' ' + current2.countryVal;
  114.     addrWrap.getElementsByTagName('li')[current2.country].style.backgroundColor = '';
  115. };
  116.  
  117. /*分别点击省市区标题的处理函数*/
  118. document.getElementById('title-wrap').onclick = function (e) {
  119.     var e = e || window.event;
  120.     var target = e.target || e.srcElement;
  121.     if (target && target.nodeName == 'LI') {
  122.         for (var z = 0; z < 3; z++) {
  123.             titleWrap[z].className = '';
  124.         }
  125.         target.className = 'titleSel';
  126.         if (target.value == '0') {
  127.             showProv2();
  128.         } else if (target.value == '1') {
  129.             showCity2(current2.prov);
  130.         } else {
  131.             showCountry2(current2.city);
  132.         }
  133.     }
  134. };

style.css

  1. /*全局样式*/
  2. * {
  3.     margin: 0;
  4.     padding: 0;
  5. }
  6.  
  7. fieldset {
  8.     width: 500px;
  9.     padding: 20px;
  10.     margin: 30px;
  11.     border: 1px solid #ccc;
  12. }
  13.  
  14. legend{
  15.     font-size: 18px;
  16.     font-weight: bold;
  17. }
  18.  
  19. #addr-show, #addr-show02,#addr-show03{
  20.     width: 200px;
  21.     height: 25px;
  22.     margin-bottom: 10px;
  23. }
  24.  
  25. .btn {
  26.     width: 80px;
  27.     height: 30px;
  28.     border-radius: 4px;
  29.     border: 1px solid #ccc;
  30.     outline: none;
  31.     background-color: #aaa;
  32.     margin: 0 20px;
  33. }
  34.  
  35. .btn:disabled{
  36.     background-color:#ccc;
  37. }
  38.  
  39. #addr-choice{
  40.     border-top: 1px solid #ccc;
  41.     border-bottom: 1px solid #ccc;
  42.     padding: 10px 0;
  43.     margin-bottom: 20px;
  44. }
  45.  
  46. #title-wrap li,#addr-wrap li{
  47.     list-style: none;
  48.     display: inline-block;
  49.     text-align: center;
  50.     cursor: pointer;
  51. }
  52.  
  53. #title-wrap li{
  54.     width:163px;
  55.     height: 45px;
  56.     line-height: 45px;
  57.     margin-bottom: 10px;
  58. }
  59.  
  60. .titleSel{
  61.     border-bottom: 2px solid #23B7E5;
  62. }
  63.  
  64. #addr-wrap li{
  65.     width: 83px;
  66.     height: 30px;
  67.     border-radius: 4px;
  68.     line-height: 30px;
  69.     font-size: 14px;
  70.     overflow:hidden;
  71.     white-space:nowrap;
  72.     text-overflow:ellipsis;
  73. }
  74. #addr-wrap li:hover{
  75.     background-color: #23B7E5;
  76. }
  77.

 

注：本文转载自blog.csdn.net的Ms_WangH的文章"https://blog.csdn.net/qq_26416195/article/details/81161741"。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。
复制链接
相关推荐
发表评论

评论记录：

未查询到任何数据！