前言：本文非原創。摘自：
<!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>
