如何使用JS按select中option的value值（而非索引）禁用指定选项？

原代码采用固定索引定位option的方式存在明显缺陷：一旦下拉选项的顺序调整、动态增删选项，就会出现定位错位、误操作选项的问题。调整为按value值匹配定位后，选项位置变化不会影响功能逻辑。

实现逻辑 #

不再直接通过options[索引]的方式获取选项，通过两种可靠的路径定位目标option，再设置对应的disabled属性即可。

参考代码 #

保留原有HTML结构：

<select id="myselect">
 <option value="20">20</option>
 <option value="30">30</option>
</select>

简洁实现：属性选择器直接定位 #

利用DOM属性选择器的能力，直接匹配带对应value的option元素，无需额外遍历：

// 禁用value为20的选项，对应原代码options[0]的操作
document.querySelector('#myselect option[value="20"]').disabled = true;
// 启用value为30的选项，对应原代码options[1]的操作
document.querySelector('#myselect option[value="30"]').disabled = false;

通用实现：遍历options集合匹配 #

逐一遍历select下的所有option，比对value值后设置状态，适合需要批量匹配、带复杂匹配规则的场景：

const targetSelect = document.getElementById('myselect');
for (const option of targetSelect.options) {
  // 匹配value=20的选项，设置为禁用
  if (option.value === '20') {
    option.disabled = true;
  }
  // 匹配value=30的选项，设置为可选中
  if (option.value === '30') {
    option.disabled = false;
  }
}

关键注意点 #

• option的value属性读取值固定为字符串类型，匹配时要注意数据类型一致，避免传入数字类型做比对导致匹配失效。
• 如果需要批量调整多个选项的状态，可以把目标value存在数组中，遍历时用includes方法做包含判断，减少重复代码。

批量匹配参考写法：

const disabledValues = ['20'];
const enabledValues = ['30'];
for (const option of targetSelect.options) {
  option.disabled = disabledValues.includes(option.value);
}

内容的提问来源于stack exchange，提问作者DataConnect