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

我想知道，使用纯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>

---

现在的问题是，我们使用的CMS限制了我们可以为报表构建的自定义字段的数量，我们必须支付（很多）来增加目前预算中没有的字段。因此，虽然这种方法对我来说更简单、更容易理解，但我认为上面我正在尝试的另一种方法更符合成本效益，因为我们只有两个自定义字段（两个选择），这为公司节省了资金，我不希望他们仅仅因为我是一个noob就花钱，我宁愿他们为更重要的内容支付额外的自定义字段。

您可以在每个选项中使用“onclick”函数

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

以前设置为显示的位置：无

---

我希望这个简单的解决方案能帮助您。

您可以在每个选项中使用“onclick”函数

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

以前设置为显示的位置：无

---

我希望这个简单的解决方案能够帮助您。

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

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

这是一个演示

HTML

CSS

---

假设您能够将属性添加到“场馆”下拉列表中，则可以添加一个数据属性，指定应显示场馆的状态

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

这是一个演示

HTML

CSS

---

在您的所有场馆地点设置一个与所在省份相匹配的课程：

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

多伦多西部

---

当您选择一个省并拉取该值时，请禁用所有场馆，然后仅重新启用具有与选项值匹配的类别的场馆。

在您的所有场馆位置上设置一个与其所在省匹配的类别：

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

多伦多西部

---

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

如果我正确理解要求和约束，并基于@Josh Cronin的解决方案

您可以考虑显示/隐藏VyueEXDROP选项，而不是启用/禁用。 代码相当简单

jQuery(function($) {
    var $venue_dropdown = $('#venue_dropdown');
    $('#select_province_dropdown').on('change', function() {
        $venue_dropdown.get(0).selectedIndex = 0; // select the ----Select Venue---- option
        $venue_dropdown.find('option')
        .not(':first') // ignore the ----Select Venue---- option
        .hide() // hide all venue options
        .filter("[data-for='" + $(this).val() + "']") // select venues in the selected Province
        .show(); // show selected venues
    }).trigger('change'); // initialise #venue_dropdown in accordance with #select_province_dropdown's initial selection
});

---

IMHO这将提供更好的用户体验，特别是在场馆列表较长的情况下。

如果我正确理解需求和约束条件，并以@Josh Cronin的解决方案为基础

您可以考虑显示/隐藏VyueEXDROP选项，而不是启用/禁用。 代码相当简单

jQuery(function($) {
    var $venue_dropdown = $('#venue_dropdown');
    $('#select_province_dropdown').on('change', function() {
        $venue_dropdown.get(0).selectedIndex = 0; // select the ----Select Venue---- option
        $venue_dropdown.find('option')
        .not(':first') // ignore the ----Select Venue---- option
        .hide() // hide all venue options
        .filter("[data-for='" + $(this).val() + "']") // select venues in the selected Province
        .show(); // show selected venues
    }).trigger('change'); // initialise #venue_dropdown in accordance with #select_province_dropdown's initial selection
});

---

我想这将提供更好的用户体验，特别是如果场馆列表很长的话。

我需要了解更多关于CMS收入模式的信息。确切地说，他们是如何收费的？嗨，罗默，我不确定这一点，这是我的主管和其他一些参加会议的人将会得到的信息。我刚被告知这是很多。实际金额并不重要，只是什么是收费的，什么不是。。。但是你现在似乎有了答案，所以请不要特意回答我的问题。我需要更多地了解CMS收入模式。确切地说，他们是如何收费的？嗨，罗默，我不确定这一点，这是我的主管和其他一些参加会议的人将会得到的信息。我刚被告知这是很多。实际金额并不重要，只是什么是收费的，什么不是。。。但是你现在似乎有答案了，所以请不要特意回答我的问题。哦，哇，这缩短了下拉列表的长度！这太棒了！！我没有直接访问html的权限，但我确信我可以使用jquery为属性添加数据，就像我为输入字段添加数据一样，类似于

$（“label[for='name']”）html（“dohtmlstuff”）对？？好的，你需要每个州所有场馆的列表。然后，您可以使用此列表将属性添加到HTML中，或者直接从中启动选项过滤。下面是一个使用JavaScript对象而不是HTML属性的演示。这太棒了，Josh，它比我目前正在做的要干净得多。非常感谢你！我设法让它在我们的表单上工作，到目前为止没有问题，所有的报告都干净地进来了！哦，哇，它缩短了下拉列表的长度！这太棒了！！我没有直接访问html的权限，但我确信我可以使用jquery为属性添加数据，就像我为输入字段添加数据一样，类似于
$（“label[for='name']”）html（“dohtmlstuff”）对？？好的，你需要每个州所有场馆的列表。然后，您可以使用此列表将属性添加到HTML中，或者直接从中启动选项过滤。下面是一个使用JavaScript对象而不是HTML属性的演示。这太棒了，Josh，它比我目前正在做的要干净得多。非常感谢你！我设法让它在我们的表单上工作，到目前为止没有问题，所有的报告都干净地进来了！谢谢你的建议Culyx！如果我不能使用Josh的方法，我认为这是最快的方法。谢谢你的建议Culyx！如果我不能使用Josh的方法，我认为这是最快的方法。
<option class="ON" value="Toronto West">Toronto West</option>

jQuery(function($) {
    var $venue_dropdown = $('#venue_dropdown');
    $('#select_province_dropdown').on('change', function() {
        $venue_dropdown.get(0).selectedIndex = 0; // select the ----Select Venue---- option
        $venue_dropdown.find('option')
        .not(':first') // ignore the ----Select Venue---- option
        .hide() // hide all venue options
        .filter("[data-for='" + $(this).val() + "']") // select venues in the selected Province
        .show(); // show selected venues
    }).trigger('change'); // initialise #venue_dropdown in accordance with #select_province_dropdown's initial selection
});