如何在 HTML <SELECT> 标签的 onChange 上显示不同的下拉组列表

debugcn 发表于 Dev

主用

我是 JavaScript 和 jQuery 的新手。我在下面提供了我的 HTML 代码。我想在我的<SELECT>标签中进行两组选择；例如中部和北部。两个<SELECT>标签都有不同的子列表。例如，Central 将有 A、B 和 C。而 Northern 将有 1、2 和 3。

我通过将 JavaScript 代码放入我的 HTML 中进行了尝试和错误，如下所示，不幸的是没有任何变化，我认为它在某处有问题。请帮助我更正我的代码。质量保证

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

然后系统能够在中部和北部之间有所不同。两者都应该有不同的列表组。在我下面的情况下，某处有错误，应该只有一个下拉列表。

我的代码如下

<label>Region :</label>
<select 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 onchange="getCentral(this)">
<option value="">Select Central</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>

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

迈克尔·泰特罗

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

希望这有帮助。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。