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>