如何根据 JavaScript 中的值禁用 <select> 中的 <option>？

Question

我有一个 <select> 有一些 <option> s。每个都有一个独特的 value 。我需要使用给定定义的 value （不是 innerHTML ）禁用 <option> 。

有人知道怎么做吗？

原文由 David 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

JavaScript，2022 年

在 2022 年，您可以使用生成的 NodeList 中的 querySelectorAll 和 forEach 来更轻松地执行相同的操作。

 document.querySelectorAll("#foo option").forEach(opt => {
    if (opt.value == "StackOverflow") {
        opt.disabled = true;
    }
});

但是，请注意字符串比较。 ‘StackOverflow’ 和 ‘stackoverflow’ 不是同一个字符串。因此，您可以在比较之前对字符串调用 .toLowerCase() ，甚至可以使用不区分大小写的正则表达式比较，如下所示：

 if ( /^stackoverflow$/i.test(option.value) ) {
  option.disabled = true;
}

纯 Javascript (2010)

使用纯 Javascript，您必须循环浏览每个选项，并单独检查它的值。

 // Get all options within <select id='foo'>...</select>
var op = document.getElementById("foo").getElementsByTagName("option");
for (var i = 0; i < op.length; i++) {
  // lowercase comparison for case-insensitivity
  (op[i].value.toLowerCase() == "stackoverflow")
    ? op[i].disabled = true
    : op[i].disabled = false ;
}

在不启用非目标元素的情况下：

 // Get all options within <select id='foo'>...</select>
var op = document.getElementById("foo").getElementsByTagName("option");
for (var i = 0; i < op.length; i++) {
  // lowercase comparison for case-insensitivity
  if (op[i].value.toLowerCase() == "stackoverflow") {
    op[i].disabled = true;
  }
}

###jQuery

使用 jQuery，你可以用一行代码做到这一点：

 $("option[value='stackoverflow']")
  .attr("disabled", "disabled")
  .siblings().removeAttr("disabled");

在不启用非目标元素的情况下：

 $("option[value='stackoverflow']").attr("disabled", "disabled");

​ 请注意，这 不 区分大小写。 “StackOverflow”将不等于“stackoverflow”。要获得不区分大小写的匹配，您必须循环遍历每个，将值转换为小写，然后检查：

 $("option").each(function(){
  if ($(this).val().toLowerCase() == "stackoverflow") {
    $(this).attr("disabled", "disabled").siblings().removeAttr("disabled");
  }
});

在不启用非目标元素的情况下：

 $("option").each(function(){
  if ($(this).val().toLowerCase() == "stackoverflow") {
    $(this).attr("disabled", "disabled");
  }
});

原文由 Sampson 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

使用简单的选择器：

document.querySelector('select[name="theName"] option[value="theValue"]').disabled = true;

原文由 Rick Mohr 发布，翻译遵循 CC BY-SA 4.0 许可协议