如何根据数组中的内容将“禁用”属性切换到下拉菜单？

Question

我有一个包含 5 个选项的下拉菜单。

<select id="dd">
 <option value="1"> 1 <option>
 <option value="2"> 2 <option>
 <option value="3"> 3 <option>
 <option value="4"> 4 <option>
 <option value="5"> 5 <option>
</select>

我有一个数组，我需要根据我的下拉菜单值

检查它

var enable = [1,3,5];

我想制作这个

<select id="dd">
  <option value="1"> 1 <option>
  <option value="2" disabled="disabled"> 2 <option>
  <option value="3"> 3 <option>
  <option value="4" disabled="disabled"> 4 <option>
  <option value="5" > 5 <option>
</select>

如何禁用我的 2 和 4 选项？

我只想启用 1,3 和 5 。

我有点卡在这里。

$("#dd > option").each(function() {
    if(  inArray(this.val(),studentsArray ) !== -1 ){
        //prop the disabled attribute
    }
});

有人可以给我推一下吗？

Answer 1

您可以像这样在 HTML 中做到这一点：

<select id="dd">
  <option value="1"> 1 <option>
  <option value="2" disabled="disabled"> 2 <option>
  <option value="3"> 3 <option>
  <option value="4" disabled="disabled"> 4 <option>
  <option value="5" disabled="disabled"> 5 <option>
</select>

注意 disabled="disabled" 是 XHTML 风格。正如其他人发布的那样，普通的旧版本本身也可以正常工作。

如果您禁用的选项始终相同，这将起作用。但是如果你想使用 jQuery 禁用所有不在数组中的选项，你可以这样做：

var array = [1, 3];
$('#dd option').prop('disabled', true); // Disables all
for (var i in array) { // Iterates over array
    $('#dd option[value="' + array[i] + '"]').prop('disabled', false); // Enable this one option
}

Answer 2

我完全重写了我的这个答案，因为我有一个更好的答案。要更改一个选项是否被禁用，给它一个 Id，或者如果有几个选项要被禁用，给它们都一样 class。对于 Id，（仅禁用一个元素）执行此操作：

variableName=document.getElementById('id');
//where 'id' in the line above is the id of the option to be disabled
variableName.setAttribute('disabled, 'disabled');

或class，非常相似

optionstobechanged=document.getElementsByClassName('class');
//where 'class' in the line above is the name of the class given to the items to be disabled
for(i=0; i<optionstobechanged.length; i++){
    optionstobechanged[i].setAttribute('disabled', 'disabled');
}

请注意，这可以回收用于类似的事情。

setAttribute();

函数接受两个字符串：要更改的 property/attribute（即选中、禁用）及其值。所以

.setAttribute('disabled', 'disabled');

结果为

disabled='disabled'

您还可以将其应用于选定的和其他属性。现在，您所要做的就是在一个函数中安装它并调用它。

如何根据数组中的内容将“禁用”属性切换到下拉菜单？

How do I toggle the `disable` attribute to my dropdown-menu base on what I have in my array?

javascript

jquery

drop-down-menu