Javascript 如何在更改HTML时显示不同的下拉组列表<；选择>；标签

我是JavaScript和jQuery的新手。我在下面提供了我的HTML代码。我想在我的

标签中进行两组选择；e、 g.中部和北部。两个

标记将具有不同的子列表。例如，中环将有A、B和C，而北部将有1、2和3

我尝试过在HTML中添加JavaScript代码，如下所示，但不幸的是没有任何变化，我发现它在某些地方有问题。请帮我更正代码。TQ

在第一步中，用户将单击中部还是北部

然后系统就能够区分中部和北部。两者都应该有不同的列表组。 在我下面的例子中，它是某个地方的错误，应该只有一个下拉列表

我的代码如下

地区：
选择区域
中心的
北方的
节点对：
选择中心
A.
B
C
选择北方
1.
2.
3.

像jquery这样的东西应该可以做到：

在您的

部分中，输入以下内容：

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

.subCat{
显示：无；
}

并在您的

中替换您的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>

地区：
选择区域
中心的
北方的
节点对：
选择中心
A.
B
C
选择北方
1.
2.
3.
$（函数（）{
$（“#selRegion”）.change（函数（）{
$（“.subCat”）.hide（）；
var val=$（this.val（）；
如果（val=“中心”）{
$（“#selCentral”）.show（）；
}否则如果（val==“北方”）{
$（“#sel”）.show（）；
}
});
});

---

希望这能有所帮助。

顺便问一下，您是Javascript或jQuery方面的专家吗？因为我有一个关于这种语言的问题。我稍后会发布。@mastersuse我是高级fullstack开发人员，我不知道什么，但肯定能帮上忙。。）

    <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>