原⽣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 = ateElement('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 = ateElement('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;
}
原生js和js的区别// 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 = ateElement('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: ["澳门特别⾏政区"]
}
]
}
完整版在这⾥

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。