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

Question

我们有两个不同的下拉框，根据第一个下拉框选择的选项，第二个下拉框中的选项将会被置灰。

HTML代码请参考以下链接：http://jsfiddle.net/vUEks/109/

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

JS

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

- alex23

---

你的代码已经在运行了。你具体在问什么？ - robabby

@robabby 不是这样的。看起来 OP 希望只有在第一个菜单中选择值为 2 的选项时，才禁用值为 5 的 option 元素。 - Josh Crozier

Answer 1

监听第一个选择元素的“change”事件，如果所选选项的值为2，则有条件地禁用其值为5的选项。请参考以下示例：这里。

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

根据你的完整HTML，实际上可能不需要jQuery： 这里有示例

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

- Josh Crozier

---

我应该把脚本放在哪里？在头部吗？还是无所谓的？ - MERose