堆栈内存溢出
  繁体   English   中英

如何禁用 <option>在一个<select>基于它在 JavaScript 中的值？我有一个带有多个 &lt;option&gt; 的 &lt;select&gt; 。每一个都有独特的价值。我需要禁用具有给定定义值（而不是 innerHTML ）的 &lt;option&gt; 。有人知道怎么做吗？</select></option>

[英]How can I disable an <option> in a <select> based on its value in JavaScript?

 原文  2010-01-28 16:06:34  4   7    javascript/ html/ select

问题描述

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?

7 个解决方案

解决方案1
 115 已采纳  2010-01-28 16:08:34

JavaScript, in 2022

You can use querySelectorAll, and forEach off of the resulting NodeList to do this same thing more easily in 2022.

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

Do be mindful of string-comparisons, however. 'StackOverflow' and 'stackoverflow' are not the same string. As such, you can call .toLowerCase() on strings before comparing, or even go with a case-insensitive regular expression comparison like the this:

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

Pure Javascript (2010)

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");
  }
});

解决方案2
 5  2015-03-23 18:16:01

Set an id to the option then use getElementById and disable it when x value has been selected, like so:

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

解决方案3
 2  2016-01-27 14:13:40

Here with JQuery, if anybody search it:

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');
       }
  });   
}

解决方案4
 2  2019-04-28 20:21:21

For some reason other answers are unnecessarily complex, it's easy to do it in one line in pure 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 replace call) from the second one. Also the first one uses Array.find and arrow functions that are not available in IE11.

解决方案5
 1  2022-01-21 09:16:33

Use a straightforward selector:

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

解决方案6
 0  2018-05-14 05:02:19

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 jQuery to get the simplest way. See my sample below.

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

The idea here is how to disable Printed option when current Status is 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:

https://jsfiddle.net/chetabahana/f7ejxhnk/28/

解决方案7
 -2  2018-12-31 13:02:19

<select class="pets">
  <option>Cat</option>
  <option>Dog</option>
  <option>Horse</option> 
</select>


$(document).ready(function() {
  $('.pets').children().each(function(index, element) {
    if ($(element).text() == "Dog") {
      $(this).prop('disabled', true);
    }
  });
});

https://jsfiddle.net/sapereaude/z17wfj0s/

解决方案8
 -4  2013-01-30 06:49:48

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何基于另一个选择选项禁用选择选项 如何使用JavaScript禁用/启用基于单选按钮的选择选项 jQuery：如果值未定义，如何禁用选择选项 如何禁用基于另一个选择选项的选择选项？ 如何根据 select 选项的值更改复选框的值？ 我怎样才能 select 基于输入值的选项？ 如何选择基于其值添加到客户端的选择选项 如何使用javascript通过值选择选项？ 如何基于时间范围禁用javascript中数据库填充的选择选项 如何根据 javascript 的数量计算 select 选件的价格
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM