javascript - jQuery: 如果没有定义值,如何禁用选择选项

  显示原文与译文双语对照的内容
0 0

我有一个输出类似于以下内容的站点:

<select id="tinynav1" class="tinynav tinynav1"> 
<option value="http://google.com">Home</option> 
<option value="undefined">About</option> 
<option value="http://website.com">- School News</option>
<option value="http://etc.com">- History Of The School</option>
<option value="http://etc.com">- Contact Us</option>
<option value="undefined">Curriculum</option>
<option value="http://etc.com">- Our Mission</option>
</select>

我想循环遍历值,如果值未定义,我想添加被禁用的属性,输出将是

<select id="tinynav1" class="tinynav tinynav1"> 
<option value="http://google.com">Home</option> 
<option value="undefined" disabled="disabled">About</option> 
<option value="http://website.com">- School News</option>
<option value="http://etc.com">- History Of The School</option>
<option value="http://etc.com">- Contact Us</option>
<option value="undefined" disabled="disabled">Curriculum</option>
<option value="http://etc.com">- Our Mission</option>
</select>
时间:原作者:4个回答

0 0

下面是一个简单的jQuery选项。

$("#tinynav1 option[value='undefined']").attr('disabled', 'disabled');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="tinynav1" class="tinynav tinynav1"> 
 <option value="http://google.com">Home</option> 
 <option value="undefined" disabled="disabled">About</option> 
 <option value="http://website.com">- School News</option>
 <option value="http://etc.com">- History Of The School</option>
 <option value="http://etc.com">- Contact Us</option>
 <option value="undefined" disabled="disabled">Curriculum</option>
 <option value="http://etc.com">- Our Mission</option>
</select>

如果你不想使用 jQuery,这里是一个纯JavaScript选项:

 var select = document.getElementById("tinynav1");
 for (var i = 0; i <select.options.length; i++) {
 if (select.options[i].value ==="undefined"){
 select.options[i].setAttribute("disabled","disabled");
 }
 }
<select id="tinynav1" class="tinynav tinynav1"> 
 <option value="http://google.com">Home</option> 
 <option value="undefined" disabled="disabled">About</option> 
 <option value="http://website.com">- School News</option>
 <option value="http://etc.com">- History Of The School</option>
 <option value="http://etc.com">- Contact Us</option>
 <option value="undefined" disabled="disabled">Curriculum</option>
 <option value="http://etc.com">- Our Mission</option>
</select>
原作者:
0 0

Alternativelly的其他答案- - jquery 。 你可以使用纯 Javascript:

NodeList.prototype.forEach = Array.prototype.forEach;
document.querySelectorAll("#tinynav1 option[value='undefined']").forEach(function(item){
 item.setAttribute("disabled","disabled");
});
<select id="tinynav1" class="tinynav tinynav1"> 
<option value="http://google.com">Home</option> 
<option value="undefined">About</option> 
<option value="http://website.com">- School News</option>
<option value="http://etc.com">- History Of The School</option>
<option value="http://etc.com">- Contact Us</option>
<option value="undefined">Curriculum</option>
<option value="http://etc.com">- Our Mission</option>
</select>
原作者:
0 0

使用属性选择器简单:

$("option[value=undefined]").prop('disabled', true);

编辑

:JS很重要,这里有一个vanilla解决方案:

var options = document.getElementById('tinynav1').options;
for(var i = 0; i <options.length; i++){
 options[i].disabled = options[i].value === 'undefined';
}
原作者:
...