无限级联下拉框选择效果即为一个下拉框的选项内容依赖于上一个下拉框的选项内容,而且可以有多个下拉框。这个效果在网站的表单中常常使用,例如选择省份、城市、区县等级别的选项。
实现无限级联下拉框选择效果的关键在于动态生成下拉框选项以及根据前一个下拉框选中的值来更新后一个下拉框的选项。下面是一个简单的实现方法:
<select id="select1">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<select id="select2"></select>
<select id="select3"></select>
第一个下拉框是静态的,后面两个下拉框的选项会根据第一个下拉框的选中值而动态生成。
// 获取第一个下拉框
var select1 = document.getElementById("select1");
// 定义省份、城市、区县的选项内容
var provinces = ["广东省", "江苏省", "浙江省"];
var cities = {
"广东省": ["广州市", "深圳市", "珠海市"],
"江苏省": ["南京市", "苏州市", "无锡市"],
"浙江省": ["杭州市", "宁波市", "温州市"]
};
var counties = {
"广州市": ["天河区", "海珠区", "番禺区"],
"深圳市": ["罗湖区", "福田区", "南山区"],
"珠海市": ["香洲区", "斗门区", "金湾区"],
"南京市": ["玄武区", "白下区", "秦淮区"],
"苏州市": ["姑苏区", "吴中区", "相城区"],
"无锡市": ["崇安区", "南长区", "北塘区"],
"杭州市": ["西湖区", "上城区", "下城区"],
"宁波市": ["海曙区", "江东区", "江北区"],
"温州市": ["鹿城区", "龙湾区", "瓯海区"]
};
// 给第一个下拉框添加change事件监听器
select1.addEventListener("change", function() {
// 获取第二个下拉框
var select2 = document.getElementById("select2");
// 根据第一个下拉框的选中值动态生成第二个下拉框的选项
select2.innerHTML = "";
var province = select1.value;
var cityArray = cities[province];
for (var i = 0; i < cityArray.length; i++) {
var option = document.createElement("option");
option.text = cityArray[i];
select2.add(option);
}
// 获取第三个下拉框
var select3 = document.getElementById("select3");
// 根据第二个下拉框的选中值动态生成第三个下拉框的选项
select3.innerHTML = "";
var city = select2.value;
var countyArray = counties[city];
for (var i = 0; i < countyArray.length; i++) {
var option = document.createElement("option");
option.text = countyArray[i];
select3.add(option);
}
});
// 给第二个下拉框添加change事件监听器
var select2 = document.getElementById("select2");
select2.addEventListener("change", function() {
// 获取第三个下拉框
var select3 = document.getElementById("select3");
// 根据第二个下拉框的选中值动态生成第三个下拉框的选项
select3.innerHTML = "";
var city = select2.value;
var countyArray = counties[city];
for (var i = 0; i < countyArray.length; i++) {
var option = document.createElement("option");
option.text = countyArray[i];
select3.add(option);
}
});
代码解释:
以上就是使用JavaScript实现无限级联下拉框选择效果的方法。