今天用到兩個關聯的select,整理一下代碼,僅供參考
如下:
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script language="javascript">
function changeProvince() {
var slecctS = document.querySelectorAll(".select");
var countrys = new Array();
countrys["0"] = ["--請選擇所在省份和地區--"];
countrys["北京市"] = ["朝陽區", "東城區", "西城區", "海淀區", "宣武區", "豐台區"];
countrys["上海市"] = ["寶山區", "長寧區", "閔行區", "楊浦區","黃浦區","虹口區","靜安區"];
countrys["廣州省"] = ["廣州市", "珠海市", "汕頭市", "揭陽市", "潮州市", "湛江市"];
countrys["深圳市"] = ["福田區", "南山區", "寶安區", "龍崗區", "鹽田區", "羅湖區"];
countrys["重慶市"] = ["萬州區", "渝中區", "大渡口區", "江北區", "沙坪壩區", "渝北區"];
countrys["天津市"] = ["和平區", "河東區", "河西區", "南開區", "紅橋區", "武清區"];
var value = slecctS[0].value;
//option 集合可返回包含 <select> 元素中所有 <option> 的一個數組。
//注意: 數組中的每個元素對應一個 <option> 標簽 - 由 0 起始。
slecctS[1].options.length = 0;
var option;
for(i = 0; i < countrys[value].length; i++) {
//new Option("文本","值",true,true)
//后面兩個true分別表示默認被選中和有效!
option = new Option(countrys[value][i], countrys[value][i]);
slecctS[1].options.add(option);
slecctS[1].options.selected=countrys[value][0];
}
if(slecctS[0].value == "0"){
slecctS[1].disabled = true;
}
else{
slecctS[1].disabled = false;
}
}
</script>
</head>
<body>
<form method="post" action="" name="myForm">
國家:
<select name="country" onChange="changeProvince()" class="select">
<option value="0">--請選擇省/城市--</option>
<option value="北京市">北京市</option>
<option value="上海市">上海市</option>
<option value="廣州省">廣州省</option>
<option value="深圳市">深圳市</option>
<option value="重慶市">重慶市</option>
<option value="天津市">天津市</option>
</select>
<select name="province" class="select">
<option>--請選擇所在省份和地區--</option>
</select>
</form>
</body>
</html>
<!--
with(document){}
with 語句用於設置代碼在特定對象中的作用域
with(document)
{.title='aaa';
}相當於:
document.title='aaa';
option的屬性:
屬性 | 描述 |
---|---|
length | 返回集合的option元素數目 |
selectedIndex | 設置或者返回select對象已選選項的索引值。(以 0 起始) |
option的方法:
index] | 以數字形式指定元素索引 (以 0 開始) |
[add(element[,index])] | 在集合中添加option元素 |
item(index) | 以數字索引返回集合中元素 |
namedItem(name) | 以名稱為索引返回集合元素 |
remove(index) | 從集合中移除元素 |
-->