JavaScript 實現二級聯動&三級聯動下拉列表
一. 關於 select 中 option 的動態操作
1. 動態創建並添加 option 的方法
1.Option對象的構造函數
Option(text, value)，接受兩個參數：text（選項的純文本）和value（被送往服務器的值），第二個參數可選。- 此構造函數會創建一個Object實例，但是兼容DOM的瀏覽器會返回一個
<option>元素，所以可以調用appendChild()將新創建的選項添加到選擇框中：selectbox.appendChild(new Option(text, value));
2.操作DOM
var option = document.createElement("option");
option.appendChild(document.createTextNode("option text"));
option.setAttribute("value", "option value");
selectbox.appendChild(option);
3.Select對象的 options 數組
// 第一種方法：數組的add()方法
select.options.add(new Option(text, value));
// 第二種方法：通過索引賦值，也可以修改原本的選項。
select.options[select.length] = new Option(text, value);
2. 關於 option 的其他操作
var select = document.getElementById("select");
// 1. 刪除所有options
select.options.length = 0;
// 2. 刪除某一項option
select.options.remove(index);
// 3. 刪除被選中的option
select.options[select.selectedIndex] = null;
// 4. 檢測是否有選項被選中
if(select.selectedIndex > -1) {...} // 有選項被選中
// 5. 得到某一項option的文本和值
var optionText = select.options[index].text;
var optionValue = select.options[index].value;
二. 二級聯動實例
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>二級聯動下拉框</title>
</head>
<body>
<form>
<select id="city">
<option>請選擇所在市</option>
</select>
<select id="area">
<option>請選擇所在區</option>
</select>
</form>
</body>
<script>
var arr_city = ["珠海", "中山"];
var arr_area = [
["香洲", "金灣", "斗門"],
["三鄉", "坦洲", "石岐"]
];
var city = document.getElementById("city");
var area = document.getElementById("area");
// 填入市選項的內容
for(var i = 0; i < arr_city.length; i++) {
city.options.add(new Option(arr_city[i]));
}
city.onchange = function getArea() {
// 每次選擇市先清空區
area.options.length = 1;
// 獲取所選市的索引
var cityIndex = this.selectedIndex - 1;
// 如果所選市的索引不是0（默認選項），則填入對應區的內容
if(cityIndex > -1) {
for(var i = 0; i < arr_area[cityIndex].length; i++) {
area.options.add(new Option(arr_area[cityIndex][i]));
}
}
}
</script>
</html>
三. 三級聯動實例
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三級聯動下拉列表</title>
</head>
<body>
<form>
<select id="country">
<option>請選擇所在國家</option>
</select>
<select id="province">
<option>請選擇所在省市</option>
</select>
<select id="city">
<option>請選擇所在城市</option>
</select>
</form>
</body>
<script>
var arr_country = ["中國", "美國", "日本"];
var arr_province = [
["直轄市", "江蘇省", "福州省", "廣東省", "甘肅省"],
["亞利桑那州", "佛羅里達州"],
["東京都", "北海道"]
]
var arr_city = [
[
["北京", "天津", "上海", "重慶"],
["南京", "蘇州", "南通", "常州"],
["福州", "福安", "龍巖", "南平"],
["廣州", "潮陽", "潮州", "澄海"],
["蘭州", "白銀", "定西", "敦煌"]
],
[
["阿帕奇縣", "科奇斯縣", "科科尼諾縣", "希拉縣"],
["阿拉丘瓦", "邁阿密", "聖羅莎", "海灣"]
],
[
["荒川區", "江戶川區", "足立區", "中野區"],
["渡島區", "上川區", "檜山振興局轄區", "石狩區"]
]
];
var country = document.getElementById("country");
var province = document.getElementById("province");
var city = document.getElementById("city");
var CounIndex = -1; // 所選國家的默認索引
// 填入國家選項的內容
for(var i = 0; i < arr_country.length; i++) {
country.options.add(new Option(arr_country[i]));
}
country.onchange = function getProvince() {
// 每次選擇國家先清空省和市的列表
province.options.length = 1;
city.options.length = 1;
// 獲取所選國家的索引
counIndex = this.selectedIndex - 1;
// 如果所選國家的索引不是0（默認選項），則填入對應省的內容
if(counIndex > -1) {
for(var i = 0; i < arr_province[counIndex].length; i++) {
province.options.add(new Option(arr_province[counIndex][i]));
}
}
}
province.onchange = function getCity() {
// 每次選擇省先清空市的列表
city.options.length = 1;
// 獲取所選省的索引
var proIndex = this.selectedIndex - 1;
// 如果所選省的索引不是0（默認選項），則填入對應市的內容
if(proIndex > -1) {
// 填入城市選項的內容
for(var i = 0; i < arr_city[counIndex][proIndex].length; i++) {
city.options.add(new Option(arr_city[counIndex][proIndex][i]));
}
}
}
</script>
</html>