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

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，我会为安大略省选择“ON”，然后只有多伦多西和多伦多东应该显示或启用。所选选项不需要显示在任何其他附加区域中，用户只需进行选择，然后在表单中继续前进。我担心的是，如果我在全国范围内有 300 个事件，即使禁用选项，这也会是一个很长的列表。

我尝试过:JSFiddle

我所尝试的问题是，会有很多 && 语句...它有效，但当我有 30、50、100 多个事件时，我认为它也不会是理想的如果我确实使用它，我不知道要在 else 中放入什么。

---背景信息---

一些关于为什么我想尝试这个的背景信息，以防有人想知道。我最终将拥有多达 170-200 个地点，我认为通过禁用基于省份的选项，我们的用户可以更轻松地选择正确的地点。最初，我为 field 创建了单独的选择，然后将它们全部隐藏，并且根据您选择的省份，与该省份相关的事件的选择将自行显示。

我的js:

$('#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

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

添加一些隐藏禁用选项的 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;
}