如何根据 JavaScript 中的值禁用 <select> 中的 <option> ？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2155909/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I disable an <option> in a <select> based on its value in JavaScript?
提问by David
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).
我有一个<select>带有多个<option>s 的。每个都有一个独特的价值。我需要<option>使用给定的定义值（不是innerhtml）禁用一个。
Anyone have an idea how?
任何人都知道如何？
回答by Sampson
Pure Javascript
纯Javascript
With pure Javascript, you'd have to cycle through each option, and check the value of it individually.
使用纯 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 ;
}
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
jQuery
With jQuery you can do this with a single line:
使用 jQuery，您可以使用一行代码来完成此操作：
$("option[value='stackoverflow']")
.attr("disabled", "disabled")
.siblings().removeAttr("disabled");
Without enabling non-targeted elements:
不启用非目标元素：
$("option[value='stackoverflow']").attr("disabled", "disabled");
? Note that this is notcase 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:
? 请注意，这不是不区分大小写的。“StackOverflow”将不等于“stackoverflow”。要获得不区分大小写的匹配，您必须遍历每个，将值转换为小写，然后检查：
$("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");
}
});
回答by Patricio Zambrano
Set an id to the option then use get element by id and disable it when x value has been selected..
为该选项设置一个 id，然后使用按 id 获取元素并在选择 x 值时禁用它。
example
例子
<body>
<select class="pull-right text-muted small"
name="driveCapacity" id=driveCapacity onchange="checkRPM()">
<option value="4000.0" id="4000">4TB</option>
<option value="900.0" id="900">900GB</option>
<option value="300.0" id ="300">300GB</option>
</select>
</body>
<script>
var perfType = document.getElementById("driveRPM").value;
if(perfType == "7200"){
document.getElementById("driveCapacity").value = "4000.0";
document.getElementById("4000").disabled = false;
}else{
document.getElementById("4000").disabled = true;
}
</script>
回答by Айдън Бейтулов
var vals = new Array( 2, 3, 5, 8 );
select_disable_options('add_reklamaciq_reason',vals);
select_disable_options('add_reklamaciq_reason');
function select_disable_options(selectid,vals){
var selected = false ;
$('#'+selectid+' option').removeAttr('selected');
$('#'+selectid+' option').each(function(i,elem){
var elid = parseInt($(elem).attr('value'));
if(vals){
if(vals.indexOf(elid) != -1){
$(elem).removeAttr('disabled');
if(selected == false){
$(elem).attr('selected','selected');
selected = true ;
}
}else{
$(elem).attr('disabled','disabled');
}
}else{
$(elem).removeAttr('disabled');
}
});
}
Here with JQ .. if anybody search it
这里有 JQ .. 如果有人搜索它
回答by Chetabahana
I would like to give you also the idea to disable an <option>with a given defined value (not innerhtml). I recommend to it with jQueryto get the simplest way. See my sample below.
我还想给您一个想法，即禁用<option>具有给定定义值 ( not innerhtml) 的 。我推荐它jQuery以获取最简单的方法。请参阅下面的示例。
HTML
HTML
Status:
<div id="option">
<select class="status">
<option value="hand" selected>Hand</option>
<option value="simple">Typed</option>
<option value="printed">Printed</option>
</select>
</div>
Javascript
Javascript
The idea here is how to disable Printedoption when current Statusis Hand
这里的想法是如何Printed在电流Status为Hand
var status = $('#option').find('.status');//to get current the selected value
var op = status.find('option');//to get the elements for disable attribute
(status.val() == 'hand')? op[2].disabled = true: op[2].disabled = false;
You may see how it works here:
你可以在这里看到它是如何工作的：
回答by user
For some reason other answers are unnecessarily complex, it's easy to do it in one line in pure JavaScript:
出于某种原因，其他答案不必要地复杂，在纯 JavaScript 中很容易在一行中完成：
Array.prototype.find.call(selectElement.options, o => o.value === optionValue).disabled = true;
or
或者
selectElement.querySelector('option[value="'+optionValue.replace(/["\]/g, '\$&')+'"]').disabled = true;
The performance depends on the number of the options (the more the options, the slower the first one) and whether you can omit the escaping(the replacecall) from the second one. Also the first one uses Array.findand arrow functions that are not available in IE11.
性能取决于选项的数量（选项越多，第一个越慢）以及是否可以省略第二个的转义（replace调用）。第一个使用Array.findIE11 中没有的箭头函数。
回答by Abhijeet
You can also use this function,
你也可以使用这个功能，
function optionDisable(selectId, optionIndices)
{
for (var idxCount=0; idxCount<optionIndices.length;idxCount++)
{
document.getElementById(selectId).children[optionIndices[idxCount]].disabled="disabled";
document.getElementById(selectId).children[optionIndices[idxCount]].style.backgroundColor = '#ccc';
document.getElementById(selectId).children[optionIndices[idxCount]].style.color = '#f00';
}
}
