一、前言
在编写网页的时候，有时候需要用到多重内容选择，例如先选择省市，再选择县镇等过程。这里简单实现了根据第一个下拉框点击的时候修改另外一个下拉框的内容，希望能对大家有所帮助。
二、实现思路
定义两个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>
