<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>聯動菜單</title>
<script type="text/javascript">
//預置要查詢的城市
var cities=[
["杭州","寧波","嘉興"],
["南京","蘇州","無錫"],
["濟南","青島","煙臺"]
];
function change(){
//獲取選中的省
var s1=document.getElementById("province");
//select.value獲取下拉選項中被選中的option的value值
//默認還是option的內容，若option的屬性有value屬性時，則獲取
//value屬性的值
var index=s1.value;
//2.查詢對應的城市
var p_cities=cities[index-1];
//3.刪除已有的市
var s2=document.getElementById("city");
var opns=s2.children;
//第一個請選擇不需要刪除
//刪除時應從后往前刪除，這是因為若從前往后刪除會影響
//select對象中selectIndex的值，從而出現漏刪的現象
/*for(var i=opns.length-1;i>0;i--){
s2.removeChild(opns[i])
}*/
//重置
s2.innerHTML="<option>-請選擇-</option>";
//4.添加要查詢到的市
if(p_cities){
for(var i=0;i<p_cities.length;i++){
//創建option節點
var opn=document.createElement("option");
opn.innerHTML=p_cities[i];
//添加節點
s2.appendChild(opn);
}
}
}
</script>
</head>
<body>
<!-- onchange 是值改變事件 -->
省:
<select id="province" onchange="change();">
<option value="0">-請選擇-</option>
<option value="1">浙江省</option>
<option value="2">江蘇省</option>
<option value="3">山東省</option>
</select>
市:
<select id="city">
<option value="0">-請選擇-</option>
</select>
</body>
</html>
聯動菜單案例
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
推薦閱讀更多精彩內容
- 一：起初做這個組件的時候豪無頭緒，整個組件做下來基本都是由師傅教導下完成，好在最后也完成了，所以打算趁著還有記憶的...
- 最近工作需要，將OA系統的部門和職位導成EXCEL聯動菜單，用于錄入職員信息，方便導入到系統中。 于是我開始查資料...
