三級聯動---(省市區)
阿新 • • 發佈:2018-12-16
首先建立三個下拉列表框
<select id="sheng"></select> <select id="shi"></select> <select id="qu"></select>
分別獲取他們的物件
<script> var sheng=document.getElementById("sheng"); var shi=document.getElementById("shi"); varqu=document.getElementById("qu");
省
var sheng_str=""; for(i=0;i<data.length;i++){ sheng_str+="<option>"+data[i].name+"</option>" } sheng.innerHTML=sheng_str;
市
var shi_index; sheng.onchange=function(){ qu.innerHTML=""; shi_index=sheng.selectedIndex; var shi_str=""; var shi_data=data[shi_index].children for(i=0;i<shi_data.length;i++){ shi_str+="<option>"+shi_data[i].name+"</option>" } shi.innerHTML=shi_str; }
區
shi.onchange=function(){ var qu_index=shi.selectedIndex; var qu_str=""; var qu_data=data[shi_index].children[qu_index].children; for(i=0;i<qu_data.length;i++){ qu_str+="<option>"+qu_data[i].name+"</option>" } qu.innerHTML=qu_str; }
</script>