因工作需要，做了一个下拉单的二级联动。
第一级是固定的选项，有A、B两个选项，第二级的选项随着第一级选项的变化而变化。
一开始是这样的：
HTML代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
<title>二级联动</title>
</head>
<body>
<form name="form1" method="post" action="">
<select id="project" onchange="changeSelect()" style="width:100px; margin-left:15px;">
<option value="0">请选择项目</option>
<option value="1">A</option>
<option value="2">B</option>
</select>
<select id="area" style="width:100px; margin-left:15px;">
<option value="">请选择区域</option>
</select>
</form>
</body>
</html>
JS代码
<script type="text/javascript">
var area = [ ['x', 'y', 'z'], // 对应A
['m', 'n'], // 对应B
]; function changeSelect() { //获得项目下拉框的对象
var slt_project = document.form1.project; //获得升级区域下拉框的对象
var slt_area = document.form1.area; //得到项目对应的升级区域数组
var project_area = area[slt_project.selectedIndex - 1]; //清空升级区域下拉框，仅留提示选项
slt_area.length = 1; //将升级区域数组中的值填充到升级区域下拉框中
for(var i=0; i < project_area.length; i++){ slt_area[i+1] = new Option(project_area[i],project_area[i]); } } </script>
但后来提出需求，第一级选B时，第二级无下拉单，直接显示“无”即可。
我把JS代码中area数组改为：
var area = [ ['x', 'y', 'z'], // 对应A
['无'], // 对应B
];
改完后第二级下拉单并没有默认显示“无”，依然需要手动选择。
于是，我把JS代码中area数组里对应B的数组注释掉，将HTML代码中第二级下拉单的option由“请选择项目”改为“无”：
HTML代码
<select id="area" style="width:100px; margin-left:15px;">
<option value="0”>无</option> </select>
JS代码
var area = [ ['x', 'y', 'z'], // 对应A // ['无']
];
选B时倒是直接默认显示“无”了，可选A以及“请选择项目”时，第二级也默认显示的是“无”了，还是不符合要求啊。
我就想，用给option赋值的方法，点击B时，将第二级默认option的“请选择区域”替换为“无”，代码如下：
HTML代码
// 给第二级下拉单的option添加id <select id="area" style="width:100px; margin-left:15px;">
<option id="option1" value="0">请选择区域</option>
</select>
JS代码
<script src="jquery-2.1.4/jquery.min.js"></script>
<script type="text/javascript"> $(function () { $("#project").click(function () { var project = $("#project option:selected").val(); var str1 = '<option value="0">请选择区域</option>'; var str2 = '<option value="0">无</option>'; if (project == "2") { // 选B时，替换为str2
$("#option1").html(str2); } else { // 如果没有else代码段，选A时，默认显示的仍然是“无”
$("#option1").html(str1); } }); }) </script>
改完以后，在Firefox上顺利实现此功能，可是在Chrome上，在第一级下单栏中相应选项上点击两下，第二级下拉单栏才能替换为相应的文字。
Google了很多资料，都没解决这个问题，作为前端小白一枚，我放弃了这段实现下拉单二级联动的代码方案，捂脸~
后来换了一套JS实现方案，HTML代码不变。因为是联动的，变动一级选择项时，要先清空先前一级选择项对应的所有二级选择项，然后再创建新的一级选择项所对应的二级选择项。
JS代码
<script type="text/javascript">
function changeSelect() { // 父选择项
var parent = document.getElementById("project"); var p_value = parent.value; // 子选择项的长度，长度大于0，即将所有选择项清空
var child = document.getElementById("area"); var c_length = child.options.length; if (c_length > 0) { for (var i = 0; i < c_length; i++) { child.options.remove(0); } } // 重创建子选择项
var area = [ ['请选择区域', 'x', 'y', 'z'], // 对应A
['无'], // 对应B
['请选择区域'], // 对应'请选择区域'
]; if(p_value == "1") { for(var i = 0; i < area[0].length; i++) { addOption(area[0][i]); } } else if (p_value == "2") { addOption(area[1]); } else { addOption(area[2]); } }
function addOption(txt) { var opt = document.createElement("option"); // 创建一个对象
opt.text = txt; opt.value = txt; area.options.add(opt); } </script>
在Firefox和Chrome上测试，均没问题，大功告成~
仍需改进：第一级下拉单因为选项比较少，是写死的，也可以写成数组，然后通过遍历数组，将数组中的数据写入option中。