js实现级联下拉列表

忘是亡心i 2022-03-15 09:35 446阅读 0赞

效果图：

HTML:

<select class="form-control" onchange="changeCondition(this.value)">
                                            <option value="0">----请选择查询条件----</option>
                                            <option value="1">打分分类</option>
                                            <option value="2">完成状态</option>
                                        </select>
                                        <select class="form-control" id="condition">
                                            <option value="">----请选择查询条件----</option>
                                        </select>

JS:

<script>
    let arrCondition = [
        ["----请选择查询条件----"],
        ["论文","答辩"],
        ["未完成","已完成"]
    ];
    function changeCondition(index) {
        let conditions = arrCondition[index];
        let condition1 = document.getElementById('condition');
        condition1.length = 0;
        for (let i = 0; i < conditions.length; i++) {
            let opt = document.createElement("option");
            opt.innerHTML = conditions[i];
            condition1.appendChild(opt);
        }
    }
</script>