如何禁用<；选项>；在a<；选择>；基于它在JavaScript中的值？_Javascript_Html_Select

如何禁用<；选项>；在a<；选择>；基于它在JavaScript中的值？

javascript html select

如何禁用<；选项>；在a<；选择>；基于它在JavaScript中的值？,javascript,html,select,Javascript,Html,Select,我有一个和一些s。每一个都有独特的价值。我需要禁用具有给定定义值（非innerhtml）的有人知道怎么做吗？纯Javascript 使用纯Javascript，您必须循环检查每个选项，并分别检查其值 // Get all options within <select id='foo'>...</select> var op = document.getElementById("foo").getElementsByTagName("option"); for (var

我有一个

和一些

s。每一个都有独特的价值。我需要禁用具有给定定义值（非innerhtml）的

有人知道怎么做吗？

纯Javascript 使用纯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;
  }
}

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

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

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

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

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

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

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

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

您也可以使用此功能

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

功能选项禁用（selectId，optionIndices）
{
对于（var idxCount=0；idxCount为该选项设置一个id，然后使用“按id获取元素”，并在选择x值时禁用它
范例
<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>


4TB
900GB
300GB
var perfType=document.getElementById（“driveRPM”）.value；
如果（perfType==“7200”）{
document.getElementById（“驱动能力”）.value=“4000.0”；
document.getElementById（“4000”）.disabled=false；
}否则{
document.getElementById（“4000”）.disabled=true；
}    

这里是JQ。如果有人搜索它
，我想给你一个主意，用一个给定的定义值（而不是innerhtml
）禁用一个
。我建议使用jQuery
来获得最简单的方法。请参阅下面的示例
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在一行中完成：
Array.prototype.find.call(selectElement.options, o => o.value === optionValue).disabled = true;

或
性能取决于选项的数量（选项越多，第一个选项的速度越慢），以及您是否可以从第二个选项中省略（替换调用）。第一个选项还使用数组。查找IE11中不可用的

和箭头函数。

否，对于值，您将使用$（“option[value=someval]”)。他在寻找值，而不是里面的文本。啊，说得好，@KyleButt。我已经更新了我的解决方案。谢谢你指出这一点。禁用带有“stackoverflow”的选项并不意味着启用没有“stackoverflow”的选项@Gumbo:正确。我试图预测未来的问题，但我可以看到我的解决方案会导致更多问题，例如如果用户默认禁用了其他选项。我已更新了我的解决方案。感谢您指出我的错误。

op[I].disabled=（op[I].value.toLowerCase（）=“stackoverflow”）

；）+1I格式化了代码，但此函数的其他隐藏问题由您来解决。：PI认为最好的解决方案是在另一个问题中给出的：

selectElement.querySelector('option[value="'+optionValue.replace(/["\\]/g, '\\$&')+'"]').disabled = true;