省市二级联动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <select id="province"> <option>请选择</option> </select> <select id="city"> <option>请选择</option> </select> <script> const aProvince = [["重庆", "大足区", "潼南区"], ["上海", "黄浦区", "徐汇区"], ["北京", "东城区", "西城区"]]; let eProvince=document.getElementById("province"); for (let i = 0; i < aProvince.length; i++){ eProvince.options.add(new Option(aProvince[i][0], i)); } eProvince.onchange = function () { let ecity=document.getElementById("city") ecity.options.length = 1 let index = eProvince.selectedIndex; for (let i = 0; i < aProvince.length; i++){ if(aProvince[i][0] === eProvince.options[index].text) { for (let n = 1; n < aProvince[i].length; n++){ ecity.options.add(new Option(aProvince[i][n], n - 1)); } } } } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <select id="province" onchange="change(this)"> <option>请选择</option> </select> <select id="city"> <option>请选择</option> </select> <script> const aProvince = {"重庆市": ["大足区", "潼南区"], "上海市": ["黄浦区", "徐汇区"], "北京市": ["东城区", "西城区"]}; let eleProvince = document.getElementById("province"); for (let i in aProvince){ let option = document.createElement("option"); option.innerHTML= i; eleProvince.appendChild(option); } function change(par) { let eleCity = document.getElementById("city"); eleCity.options.length=1; let choice = par.options[par.selectedIndex].innerHTML for (let i in aProvince[choice]){ let option = document.createElement("option"); option.innerHTML= aProvince[choice][i]; eleCity.appendChild(option); } } </script> </body> </html>