脚本宝典收集整理的这篇文章主要介绍了js实例教程-原生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: ["澳门特别行政区"] } ] } 完整版在这里全部省市区(县)数据
觉得可用，就经常来吧！@L_512_1@ 脚本宝典 欢迎评论哦！ js技巧，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的js实例教程-原生JS实现省市区(县)三级联动下拉列表的详细教程全部内容，希望文章能够帮你解决js实例教程-原生JS实现省市区(县)三级联动下拉列表的详细教程所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。