select兩個關聯的下拉列表


今天用到兩個關聯的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) 從集合中移除元素

 

-->


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。