JS实现下拉单的二级联动
因工作需要，做了一个下拉单的二级联动。
第一级是固定的选项，有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">Aoption>
<option value="2">Boption>
select>
<select id="area" style="width:100px; margin-left:15px;">
<option value="">请选择区域option>
select>
form>
body>
html>
JS代码
但后来提出需求，第一级选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”>无
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代码
改完以后，在Firefox上顺利实现此功能，可是在Chrome上，在第一级下单栏中相应选项上点击两下，第二级下拉单栏才能替换为相应的文字。
Google了很多资料，都没解决这个问题，作为前端小白一枚，我放弃了这段实现下拉单二级联动的代码方案，捂脸~
后来换了一套JS实现方案，HTML代码不变。因为是联动的，变动一级选择项时，要先清空先前一级选择项对应的所有二级选择项，然后再创建新的一级选择项所对应的二级选择项。
JS代码
在Firefox和Chrome上测试，均没问题，大功告成~ 仍需改进：第一级下拉单因为选项比较少，是写死的，也可以写成数组，然后通过遍历数组，将数组中的数据写入option中。