Question

我想知道这样的东西如何使用纯JS或使用jQuery（我想如果可能通过jQuery，它会更快完成？）。如果我有一个选择下拉列表，并且用户选择了一个选项，则根据该选项，下一个下拉列表仅启用某些选项。

例如，我正在安大略省参加一个活动：

<select name="select_province_dropdown" id="select_province_dropdown" size="1" style="width: 183px;">
    <option value="----Select Province----">----Select Province----</option>
    <option value="AB">AB</option>
    <option value="BC">BC</option>
    <option value="MB">MB</option>
    <option value="NL">NL</option>
    <option value="NS">NS</option>
    <option value="ON">ON</option>
    <option value="PE">PE</option>
    <option value="SK">SK</option>
</select>

<select name="venue_dropdown" id="venue_dropdown" size="1" style="width: 274px;">
    <option value="----Select Venue----">----Select Venue----</option>
    <option value="Toronto West">Toronto West</option>
    <option value="Vancouver">Vancouver</option>
    <option value="Edmonton">Edmonton</option>
    <option value="Toronto East">Toronto East</option>
</select>

因此，使用上面的HTML，我会为安大略省选择“开启”，然后只显示或启用多伦多西部和多伦多东部。所选选项不需要显示在任何其他区域中，用户只需进行选择，然后在表单中继续。我担心的是，如果我在全国范围内举办了300场活动，那么即使禁用了选项，这些活动也会很长。

我尝试了什么：JSFiddle

我所看到的与我所尝试过的问题是会有很多＆amp;＆amp;声明...它有效，但是当我有30,50,100多个事件时，我认为它不会是理想的，如果我使用它，我也不知道在其他地方放什么。

---背景资料---

关于为什么我想试试这个的一些背景信息，任何人都在想。我最终将拥有多达170-200个地点，我认为通过禁用基于省份的选项，我们的用户更容易选择正确的地点。最初我为场地创建了单独的selects，然后将它们全部隐藏起来，根据你选择的哪个省select，与该省相关的事件会显露出来。

我对此有所了解：

$('#select_province_dropdown').on('change', function() {
    if ($("#select_province_dropdown").val() === "AB") {
        $(".hideAB").attr("style", "display: block;");
    } else {
        $(".hideAB").attr("style", "display: none;");
    }
});

现在的问题是我们使用的CMS限制了我们可以为报告构建的自定义字段的数量，我们必须支付（很多）以增加目前不在预算中的字段。所以虽然这种方法更简单，更容易让我理解，但我认为上面的其他方法，我试图弄清楚如何做是更好的成本明智，因为那时我们只有两个自定义字段（两个选择），这节省了公司的钱我不希望他们只是因为我是一个菜鸟而花钱，我宁愿他们为更重要的东西付出额外的自定义字段。

Answer 1

您可以在每个选项中使用“onclick”功能。

    <option onclick='show(this)' data-id1='AB' value="AB">AB</option>

然后你的'show function'会设置第二个菜单，选项为“id ='whatever'”到

    style='display:block'

之前设置为display：none 我希望这个简单的解决方案可以帮助你。

Answer 2

假设您能够向场地下拉列表添加属性，您可以添加一个数据属性，指定场地应显示的状态。

添加一些隐藏已禁用选项的CSS，并将JavaScript更改为仅显示具有正确数据属性值的启用选项。

以下是演示https://jsfiddle.net/kf5tqdw2/6/

HTML

<select name="select_province_dropdown" id="select_province_dropdown" size="1" style="width: 183px;">
    <option value="----Select Province----">----Select Province----</option>
    <option value="AB">AB</option>
    <option value="BC">BC</option>
    <option value="MB">MB</option>
    <option value="NL">NL</option>
    <option value="NS">NS</option>
    <option value="ON">ON</option>
    <option value="PE">PE</option>
    <option value="SK">SK</option>
</select>

<select name="venue_dropdown" id="venue_dropdown" size="1" style="width: 274px;">
    <option value="----Select Venue----">----Select Venue----</option>
    <option data-for="ON" value="Toronto West">Toronto West</option>
    <option data-for="BC" value="Vancouver">Vancouver</option>
    <option data-for="AB" value="Edmonton">Edmonton</option>
    <option data-for="ON" value="Toronto East">Toronto East</option>
</select>

的JavaScript

$('#select_province_dropdown').on('change', function() {
    var state = $("#select_province_dropdown").val();
    $("#venue_dropdown option").attr("disabled","disabled");
    $("#venue_dropdown option[data-for='" + state + "']").removeAttr("disabled");
});

CSS

option[disabled] {
    display: none;
}

Answer 3

在与您所在省份相匹配的所有场地位置设置课程：

<option class="ON" value="Toronto West">Toronto West</option>

当您选择省拉值时，禁用所有场地，然后仅重新启用具有与选项值匹配的类别的场地。

Answer 4

如果我正确理解了要求和约束，并建立在@Josh Cronin的解决方案......

您可以考虑显示/隐藏#venue_dropdown选项，而不是启用/禁用。

代码相当简单......

A7

<强> DEMO

恕我直言，这将提供更好的用户体验，特别是如果场地列表很长。

当用户在其他选择中选择选项时，如何在选择中启用某些选项？

4 个答案: