jQuery：如果未定义值，如何禁用select选项

Question

我有一个输出类似于：

的网站

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

Answer 1

使用属性选择器足够简单：

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

• [attribute=value]
• .prop()

---

修改

由于vanilla JS似乎很重要，这里有一个vanilla JS解决方案：

var options = document.getElementById('tinynav1').options;

for(var i = 0; i < options.length; i++){
    options[i].disabled = options[i].value === 'undefined';
}

Answer 2

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

Answer 3

替代其他jQuery的答案......你可以使用纯Javascript：

＆＃13;

＆＃13;

NodeList.prototype.forEach = Array.prototype.forEach;

document.querySelectorAll("#tinynav1 option[value='undefined']").forEach(function(item){
    item.setAttribute("disabled", "disabled");
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;