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">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中。