摘要:接到了公司的新需求,其中有涉及到要选择区域的三级联动下拉列表有关的东西。然后我到网上找有关这方面的资料,发现大多是用插件写的,但是我不想让代码变得很庞大,所以想用原生的JS来实现。实现的思路与主要代码如下:

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

接到了公司的新需求,其中有涉及到要选择区域的三级联动下拉列表有关的东西。然后我到网上找有关这方面的资料,发现大多是用插件写的,但是我不想让代码变得很庞大,所以想用原生的JS来实现。实现的思路与主要代码如下:

主要的html代码:

  <fieldset>     <legend>下拉选择框实现省市区(县)三级联动</legend>     <form action="#">       <label for="addr-show">您选择的是:         <input type="text" value="" id="addr-show">       </label>       <br>        <!-- 省份选择 -->       <select id="prov" onchange="showCity(this)">         <option>=请选择省份=</option>       </select>        <!--城市选择-->       <select id="city" onchange="showCountry(this)">         <option>=请选择城市=</option>       </select>        <!--县区选择-->       <select id="country" onchange="selecCountry(this)">         <option>=请选择县区=</option>       </select>        <button type="button" class="btn met1" onClick="showAddr()">确定</button>     </form>   </fieldset>

CSS代码如下:

 * {   margin: 0;   padding: 0; }  fieldset {   width: 500px;   padding: 20px;   margin: 30px;   border: 1px solid #ccc; }  legend{   font-size: 18px;   font-weight: bold; }  #addr-show {   width: 200px;   height: 25px;   margin-bottom: 10px; }  .btn {   width: 80px;   height: 30px;   border-radius: 4px;   border: 1px solid #ccc;   outline: none;   background-color: #aaa;   margin: 0 20px; }  .btn:disabled{   background-color:#ccc; }  select {   width: 120px;   height: 30px; }  select#city {   display: none; }  select#country {   display: none; }

页面加载时,动态获取省份列表并放到下拉菜单的下拉项中:

 /*自动加载省份列表*/ (function showProv() {   btn.disabled = true;   var len = provice.length;   for (var i = 0; i < len; i++) {     var provOpt = document.createElement('option');     provOpt.innerText = provice[i]['name'];     provOpt.value = i;     prov.appendChild(provOpt);   } })();

这是一个立即执行函数。
当点击省份的下拉列表时会触发select的onchange事件,我们用options的selectedIndex属性找到用户选择的省份,动态的生成相应省得城市列表。

 /*根据所选的省份来显示城市列表*/ function showCity(obj) {   var val = obj.options[obj.selectedIndex].value;   if (val >=0) {     city.style.display = 'inline-block';     country.style.display = 'none';   } else {     city.style.display = 'none';     country.style.display = 'none';   }   if (val != current.prov) {     current.prov = val;     addrShow.value = '';     btn.disabled = true;   }   if (val != null) {     city.length = 1;     if (provice[val]) {       var cityLen = provice[val]["city"].length;     }     // var cityLen = provice[val]["city"].length;     for (var j = 0; j < cityLen; j++) {       var cityOpt = document.createElement('option');       cityOpt.innerText = provice[val]["city"][j].name;       cityOpt.value = j;       city.appendChild(cityOpt);     }   } }

当点击城市列表中的某一项时,原理同上(此处不赘述)

 /*根据所选的城市来显示县区列表*/ function showCountry(obj) {   var val = obj.options[obj.selectedIndex].value;   if (val >=0) {     country.style.display = 'inline-block';   } else {     country.style.display = 'none';   }   current.city = val;   if (val != null) {     country.length = 1; //清空之前的内容只留第一个默认选项     if (provice[current.prov]["city"][val]) {       var countryLen = provice[current.prov]["city"][val].districtAndCounty.length;     }     // var countryLen = provice[current.prov]["city"][val].districtAndCounty.length;     if(countryLen == 0){       addrShow.value = provice[current.prov].name + '-' + provice[current.prov]["city"][current.city].name;       return;     }     for (var n = 0; n < countryLen; n++) {       var countryOpt = document.createElement('option');       countryOpt.innerText = provice[current.prov]["city"][val].districtAndCounty[n];       countryOpt.value = n;       country.appendChild(countryOpt);     }   } }

我们这里用的省市区数据来自网络,不保证完整性,仅作案例使用。数据格式如下:

 var provice = [   {     name: "北京市",     city: [       {         name: "北京市",         districtAndCounty: ["东城区", "西城区", "崇文区", "宣武区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "怀柔区", "平谷区", "密云县", "延庆县", "延庆镇"]       }     ]   },   ...   {     name: "澳门",     city: [       {         name: "澳门特别行政区",         districtAndCounty: ["澳门特别行政区"]       }     ]   }

完整版在这里全部省市区(县)数据

接到了公司的新需求,其中有涉及到要选择区域的三级联动下拉列表有关的东西。然后我到网上找有关这方面的资料,发现大多是用插件写的,但是我不想让代码变得很庞大,所以想用原生的JS来实现。实现的思路与主要代码如下:

主要的html代码:

  <fieldset>     <legend>下拉选择框实现省市区(县)三级联动</legend>     <form action="#">       <label for="addr-show">您选择的是:         <input type="text" value="" id="addr-show">       </label>       <br>        <!-- 省份选择 -->       <select id="prov" onchange="showCity(this)">         <option>=请选择省份=</option>       </select>        <!--城市选择-->       <select id="city" onchange="showCountry(this)">         <option>=请选择城市=</option>       </select>        <!--县区选择-->       <select id="country" onchange="selecCountry(this)">         <option>=请选择县区=</option>       </select>        <button type="button" class="btn met1" onClick="showAddr()">确定</button>     </form>   </fieldset>

CSS代码如下:

 * {   margin: 0;   padding: 0; }  fieldset {   width: 500px;   padding: 20px;   margin: 30px;   border: 1px solid #ccc; }  legend{   font-size: 18px;   font-weight: bold; }  #addr-show {   width: 200px;   height: 25px;   margin-bottom: 10px; }  .btn {   width: 80px;   height: 30px;   border-radius: 4px;   border: 1px solid #ccc;   outline: none;   background-color: #aaa;   margin: 0 20px; }  .btn:disabled{   background-color:#ccc; }  select {   width: 120px;   height: 30px; }  select#city {   display: none; }  select#country {   display: none; }

页面加载时,动态获取省份列表并放到下拉菜单的下拉项中:

 /*自动加载省份列表*/ (function showProv() {   btn.disabled = true;   var len = provice.length;   for (var i = 0; i < len; i++) {     var provOpt = document.createElement('option');     provOpt.innerText = provice[i]['name'];     provOpt.value = i;     prov.appendChild(provOpt);   } })();

这是一个立即执行函数。
当点击省份的下拉列表时会触发select的onchange事件,我们用options的selectedIndex属性找到用户选择的省份,动态的生成相应省得城市列表。

 /*根据所选的省份来显示城市列表*/ function showCity(obj) {   var val = obj.options[obj.selectedIndex].value;   if (val >=0) {     city.style.display = 'inline-block';     country.style.display = 'none';   } else {     city.style.display = 'none';     country.style.display = 'none';   }   if (val != current.prov) {     current.prov = val;     addrShow.value = '';     btn.disabled = true;   }   if (val != null) {     city.length = 1;     if (provice[val]) {       var cityLen = provice[val]["city"].length;     }     // var cityLen = provice[val]["city"].length;     for (var j = 0; j < cityLen; j++) {       var cityOpt = document.createElement('option');       cityOpt.innerText = provice[val]["city"][j].name;       cityOpt.value = j;       city.appendChild(cityOpt);     }   } }

当点击城市列表中的某一项时,原理同上(此处不赘述)

 /*根据所选的城市来显示县区列表*/ function showCountry(obj) {   var val = obj.options[obj.selectedIndex].value;   if (val >=0) {     country.style.display = 'inline-block';   } else {     country.style.display = 'none';   }   current.city = val;   if (val != null) {     country.length = 1; //清空之前的内容只留第一个默认选项     if (provice[current.prov]["city"][val]) {       var countryLen = provice[current.prov]["city"][val].districtAndCounty.length;     }     // var countryLen = provice[current.prov]["city"][val].districtAndCounty.length;     if(countryLen == 0){       addrShow.value = provice[current.prov].name + '-' + provice[current.prov]["city"][current.city].name;       return;     }     for (var n = 0; n < countryLen; n++) {       var countryOpt = document.createElement('option');       countryOpt.innerText = provice[current.prov]["city"][val].districtAndCounty[n];       countryOpt.value = n;       country.appendChild(countryOpt);     }   } }

我们这里用的省市区数据来自网络,不保证完整性,仅作案例使用。数据格式如下:

 var provice = [   {     name: "北京市",     city: [       {         name: "北京市",         districtAndCounty: ["东城区", "西城区", "崇文区", "宣武区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "怀柔区", "平谷区", "密云县", "延庆县", "延庆镇"]       }     ]   },   ...   {     name: "澳门",     city: [       {         name: "澳门特别行政区",         districtAndCounty: ["澳门特别行政区"]       }     ]   }

完整版在这里全部省市区(县)数据

觉得可用,就经常来吧!Javascript技巧 脚本宝典 欢迎评论哦! js技巧,巧夺天工,精雕玉琢。小宝典献丑了!

本文固定链接:

js实例教程-原生JS实现省市区(县)三级联动下拉列表的详细教程

http://www.js-code.com/js/js_1610.html

80%的人都看过