javaScript實現級聯下拉列表
阿新 • • 發佈：2020-12-30
技術標籤：JavaScript小作業
javaScript實現級聯下拉列表
程式碼如下
<head> <meta charset="UTF-8"> <title>級聯下拉</title> </head> <body> <select id="province" onchange="handleChange()"> <option value="0">河南</option> <option value="1">河北</option> <option value="2">山東</option> <option value="3">山西</option> </select> <select name="" id="city"> <option value="0">鄭州</option> <option value="1">洛陽</option> <option value="2">南陽</option> <option value="3">安陽</option> </select> </body> <script> var a0=["鄭州","洛陽","南陽","安陽"]; var a1=["石家莊","保定","承德","邯鄲"]; var a2=["濟南","青島","菏澤","棗莊"]; var a3=["太原","晉城","呂梁","長治"]; var a=[a0,a1,a2,a3]; function handleChange() { var proDom=document.querySelector("#province"); //a[prodom.value]//獲取省份對應的城市陣列 var html=""; for (var i=0;i<a[proDom.value].length;i++){ html+='<option value="'+i+'">'+a[proDom.value] [i]+'</option>'; } console.log(html); var cityDom=document.querySelector("#city"); city.innerHTML=html; } </script>