下拉框的多级联动

实现下拉框的多级联动，描述如下：
对一级下拉框有几个选项a、b、c、d、e，选中a之后，二级下拉框只会有a所对应的选项，同理对b、c、d、e也如此
效果如图：



代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉框的多级联动</title>
</head>
<body>
    <select id="first" onChange="nextChange()">
        <option selected="selected">替代模型</option>
        <option>VGG16</option>
        <option>ResNet152</option>
        <option>InceptionV3</option>
        <option>InceptionResNetV2</option>
    </select>

    <select id="second">
        <option selected="selected">中间层</option>
    </select>


<script>
    function nextChange()
    {
        var first = document.getElementById("first");
        var second = document.getElementById("second");
        second.options.length = 0; // 清除second下拉框的所有内容
        if(first.selectedIndex == 1)
        {
            second.options.add(new Option("Conv1_2", "0", false, true));  // 默认选中区
            second.options.add(new Option("Conv2_2", "4"));
            second.options.add(new Option("Conv3_3", "2"));
            second.options.add(new Option("Conv4_3", "2"));
            second.options.add(new Option("Conv5_3", "1"));
        }

        if(first.selectedIndex == 2)
        {
            second.options.add(new Option("Conv2d_2b", "0", false, true));  // 默认选中区
            second.options.add(new Option("Conv2d_4a", "1"));
            second.options.add(new Option("Mixed_5b", "2"));
            second.options.add(new Option("Mixed_6a", "3"));
            second.options.add(new Option("Mixed_7a", "4"));
        }

        if(first.selectedIndex == 3)
        {
            second.options.add(new Option("Conv2d_2b", "0", false, true));  // 默认选中区
            second.options.add(new Option("Conv2d_4a", "1"));
            second.options.add(new Option("Mixed_5b", "2"));
            second.options.add(new Option("Mixed_6a", "3"));
            second.options.add(new Option("Mixed_7a", "4"));
        }

        if(first.selectedIndex == 4)
        {
            second.options.add(new Option("block1/unit_3", "0", false, true));  // 默认选中区
            second.options.add(new Option("block1/unit_8", "1"));
            second.options.add(new Option("block1/unit_18", "2"));
            second.options.add(new Option("block1/unit_36", "3"));
            second.options.add(new Option("block1/unit_3", "4"));
        }
    }

</script>
</body>
</html>

posted on 2022-02-17 10:16  lpzju  阅读(260)  评论(0)  编辑  收藏  举报

导航