Question

我是JavaScript和jQuery的新手。我在下面提供了我的HTML代码。我想在我的标签都将具有不同的子列表。例如，中部将具有A，B和C。而北部将具有1、2和3。我通过将JavaScript代码放在下面的HTML中来尝试并出错，但是不幸的是没有任何变化，我觉得这在某些地方有问题。请通过更正我的代码来帮助我。 TQ 在第一步，用户将单击“中央”或“北部”。然后系统能够在中部和北部之间有所不同。两者应具有不同的列表组。在下面的情况下，某处有误，应该只有一个下拉菜单。我的代码如下区域：节点对：

Answer 1

jquery之类的东西应该可以解决问题：

在您的<head></head>部分中输入以下内容：

    <style>
        .subCat {
            display: none;
        }
    </style>

然后在您的<body></body>中替换为此的html：

    <label>Region :</label>
    <select id="selRegion" class="custom-select form-control">
        <option value="">Select Region</option>
        <option value="central" id="Central">Central</option>
        <option value="northern" id="Northern">Northern</option>
    </select>

    <label>Node Pair :</label>
    <select id="selCentral" onchange="getCentral(this)" class="subCat">
        <option value="">Select Central</option>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
    </select>

    <select id="selNorthern" onchange="getNorthern(this)" class="subCat">
        <option value="">Select Northern</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>

    <script>
        $(function() {
            $("#selRegion").change(function() {
                $(".subCat").hide();

                var val = $(this).val();
                if(val == "central") {
                    $("#selCentral").show();
                } else if(val == "northern") {
                    $("#selNorthern").show();
                }
            });
        });
    </script>

希望这会有所帮助。

如何在onChange of HTML <select>标记上显示不同的下拉组列表

1 个答案: