一、前言
在编写网页的时候，有时候需要用到多重内容选择，例如先选择省市，再选择县镇等过程。这里简单实现了根据第一个下拉框点击的时候修改另外一个下拉框的内容，希望能对大家有所帮助。
二、实现思路
定义两个select选择框，在js脚本中设置第一个下拉框的onchange函数，点击时删除第二个下拉框原有的内容并添加新的内容。
三、HTML+JS源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>根据一个下拉框改变另外一个下拉框的内容</title>
</head>
<body>
<!第一个下拉框内容>
<select id="initials" onchange="Change_second_selectwords();">
<option value="">Initial keywords</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select id="top_domains"></select>
<script>
var first_keywords = {};
//定义每个字母对应的第二个下拉框
first_keywords['A'] = ['a1', 'a2', 'a3'];
first_keywords['B'] = ['b1', 'b2', 'b3'];
first_keywords['C'] = ['c1', 'c2', 'c3'];
function Change_second_selectwords() {
//根据id找到两个下拉框对象
var target1 = document.getElementById("initials");
var target2 = document.getElementById("top_domains");
//得到第一个下拉框的内容
var selected_initial = target1.options[target1.selectedIndex].value;
//清空第二个下拉框
while (target2.options.length) {
target2.remove(0);
}
//根据第一个下拉框的内容找到对应的列表
var initial_list = first_keywords[selected_initial];
if (initial_list) {
for (var i = 0; i < initial_list.length; i++) {
var item = new Option(initial_list[i], i);
//将列表中的内容加入到第二个下拉框
target2.options.add(item);
}
}
}
</script>
</body>
</html>
四、运行情况
1、初始情况
2、点击后情况对比
5472
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
