如何禁用下拉选择中的某些选项？答案

【问题标题】：How to disable certain options in a drop down select?如何禁用下拉选择中的某些选项？
【发布时间】：2015-05-12 07:27:21
【问题描述】：

我们有两个不同的下拉框，根据在第一个中选择的一个，选项将在第二个中显示为灰色。

http://jsfiddle.net/vUEks/109/

HTML

<select>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

<select>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
    <option value="6">Option 6</option>
</select>

if ($('option[value=2]').prop('selected', true)) {
  $('option[value=5]').prop('disabled', true);
}

【问题讨论】：

你的小提琴奏效了。你到底在问什么？
@robabby 不，不是。如果在第一个菜单中选择了值为 2 的选项，则 OP 似乎希望仅禁用值为 5 的 option 元素。

标签： javascript jquery html select drop-down-menu

【解决方案1】：

监听第一个select元素的change事件，如果选中的option的值为2，则有条件地禁用值为5的option：

Example Here

$('select:first').on('change', function () {
    $('option[value=5]').prop('disabled', this.value === '2');
});

根据您的完整 HTML，您可能实际上不需要 jQuery：

Example Here

document.querySelector('.first-menu').addEventListener('change', function () {
    document.querySelector('option[value="5"]').disabled = this.value === '2';
});

【讨论】：

脚本应该放在哪里？在头上？还是没关系？