如何禁用<选项>在< select>基于它在JavaScript中的价值？ [英] How can I disable an <option> in a <select> based on its value in JavaScript?

问题描述

我有一个< select> ，其中一些< option> s。每个都有独特的价值。我需要使用给定的定义值（不是innerhtml）来禁用< option> 。 任何人都有想法如何？

解决方案

纯Javascript

必须单独检查每个选项的值。

  // //获取< select中的所有选项ID = '富' > ...< /选择> 
 var op = document.getElementById（foo）。getElementsByTagName（option）; 
 for（var i = 0; i  //小写字母不区分大小写比较
（op [i] .value.toLowerCase（）== stackoverflow）
？ op [i] .disabled = true 
：op [i] .disabled = false; 
} 
  

不启用非目标元素：

  //获取< select id ='foo'> ...中的所有选项...< / select> 
 var op = document.getElementById（foo）。getElementsByTagName（option）; 
 for（var i = 0; i  //小写字母不区分大小写比较
 if（op [i] .value.toLowerCase（）= =stackoverflow）{
 op [i] .disabled = true; 
 
 
 code $ 
 $ h $ j $ 
 
 
使用jQuery，您可以使用一行代码完成此操作： 
 
 
  $（option [value ='stackoverflow' ]）
 .attr（disabled，disabled）
 .siblings（）。removeAttr（disabled）; 
  
不启用非目标元素： 
 
 
  $（option [value ='stackoverflow']）。attr（disabled，disabled）; 
  
 
 
  
请注意，这个不是大小写不敏感的。 StackOverflow不会等于stackoverflow。要获得不区分大小写的匹配，您必须循环遍历每个值，将值转换为小写，然后检查： 
 
 
 < $（this）.val（）。toLowerCase（）==stackoverflow）{
 $（this（））$（$） ）.attr（disabled，disabled）。siblings（）。removeAttr（disabled）; 
} 
}）; 
  
不启用非目标元素： 
 
 <$ （$（this）.val（）。toLowerCase（）==stackoverflow）{$ b（$ {code> $（option）。 $ b $（this）.attr（disabled，disabled）; 
} 
}）; 
  

I have a <select> with a number of <option>s. Each has a unique value. I need to disable an <option> with a given defined value (not innerhtml).

Anyone have an idea how?

解决方案

Pure Javascript

With pure Javascript, you'd have to cycle through each option, and check the value of it individually.

// 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 ;
}

Without enabling non-targeted elements:

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

With jQuery you can do this with a single line:

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

Without enabling non-targeted elements:

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

​ Note that this is not case insensitive. "StackOverflow" will not equal "stackoverflow". To get a case-insensitive match, you'd have to cycle through each, converting the value to a lower case, and then check against that:

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

Without enabling non-targeted elements:

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

这篇关于如何禁用<选项>在< select>基于它在JavaScript中的价值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！