如何在下拉选择中禁用某些选项

How to disable certain options in a drop down select?

本文关键字：选项 选择      更新时间：2023-09-26

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

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>

.JS

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

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

这里的例子 

$('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';
});
相关文章：