javascript实现下拉条联动_原生js实现三级联动下拉框

HTML部分

三级联动

select {

width: 200px;

margin-right: 10px;

}

请选择省

>省

请选择市

>市

请选择区县

>县

JS部分

const forms = document.forms[0];

for (let i = 0; i < data.length; i++) {

let opt = document.createElement("option");

opt.innerHTML = data[i].value;

forms.province.appendChild(opt);

}

//省份发生改变时候触发的方法

forms.province.onchange = function () {

//根据下标判断当前是否选择了省份

if (forms.province.selectedIndex !== 0) {

forms.city.innerHTML="请选择市"

forms.county.innerHTML="请选择区县"

forms.city.disabled = false;

let currentCity = [];

for (let i = 0; i < data.length; i++) {

if (data[i].value === forms.province.value) {

currentCity = data[i].children;

}

}

for(let i=0; i

let opt =document.createElement("option")

opt.innerHTML=currentCity[i].value

forms.city.appendChild(opt)

}

} else {

forms.city.disabled=true

forms.county.disabled=true

forms.city.innerHTML="请选择市"

forms.county.innerHTML="请选择区县"

}

};

forms.city.οnchange=function(){

if (forms.city.selectedIndex!=0) {

forms.county.innerHTML="请选择区县"

forms.county.disabled=false

let currentCity=[]

let currentCounty=[]

for (let i = 0; i < data.length; i++) {

for(let j=0; j

if (data[i].children[j].value== forms.city.value) {

currentCounty=data[i].children[j].children

}

}

}

for(let i=0; i

let opt=document.createElement("option")

opt.innerHTML=currentCounty[i].value

forms.county.appendChild(opt)

}

}else{

forms.county.disabled=true

forms.county.innerHTML="请选择区县"

}

}