如何使用JavaScript禁用多个选择标签中的多个选项

How do I disable multiple options in multiple select tags with JavaScript?

本文关键字：标签 选项 选择 何使用 JavaScript      更新时间：2023-09-26

我有一个有多个下拉菜单的页面，我想在所有这些下拉菜单中禁用多个选项。

我要禁用的选项共享某些特征，即它们分别被两个类标识。所有列表中的许多选项共享相同的类，我想添加几个按钮来基于这些类启用或禁用选项。

我的问题是，我在这里看到的标准方法是目标选项

  1. by select element
    2. 由数量
  2. 。

但是我的是动态生成的，我试图禁用的选项并不总是彼此相邻。

下面是其中一个下拉菜单的片段:

<select name="m1">
    <option value="Abyss Guard, Cereberus" class="Covert Beast">Abyss Guard, Cereberus</option>
    <option value="Abyss Guard, Cereberus+" class="Covert Beast">Abyss Guard, Cereberus+</option>
    <option value="Achlis+" class="Covert Beast">Achlis+</option>
    <option value="Adept Devil+" class="Impulse Demon">Adept Devil+</option>
    <option value="Agares+" class="Covert Demon">Agares+</option>
    <option value="Airship of Death+" class="Psycho Creation">Airship of Death+</option>
    <option value="Ancient Huge Statue+" class="Psycho Creation">Ancient Huge Statue+</option>
    <option value="Anna Thorn Maiden" class="Impulse Demon">Anna Thorn Maiden</option>
    <option value="Anna Thorn Maiden+" class="Impulse Demon">Anna Thorn Maiden+</option>
    <option value="Anomalocaris+" class="Impulse Beast">Anomalocaris+</option>
    <option value="Apopisu of Chaos+" class="Psycho Beast">Apopisu of Chaos+</option>
    <option value="Arachno Chi" class="Psycho Crawler">Arachno Chi</option>
    <option value="Arachno Chi+" class="Psycho Crawler">Arachno Chi+</option>
    <option value="Arbitration Demon+" class="Psycho Demon">Arbitration Demon+</option>
    <option value="Armored Black Tiger+" class="Impulse Beast">Armored Black Tiger+</option>
    <option value="Armored Bucephalus+" class="Covert Beast">Armored Bucephalus+</option>
</select>

这绝不是一个详尽的列表，每个下拉菜单都有几百个选项，尽管所有下拉菜单都包含相同的列表。如您所见，该列表是按字母顺序排序的，而不是按类排序的。

我希望禁用和启用基于两个类之一的按钮选项，禁用状态应该覆盖启用状态。标准的document.getElementById('m1').options[number].disabled在这里并没有真正帮助我，因为列表是动态生成的，我不知道特定选项将在哪里结束。

该网站的部分目标是尽量减少重新加载所需的数量，同时尽量减少正在执行的javascript数量，以加快响应速度。是否有一种方法，我可以选择所有的选项在所有的下拉列表中，是任何特定的类?

这里有一种方法。如果您有那么多选项，而且它们不会改变，请考虑缓存文档的结果。querySelectorAll，这样您就不必在每次要禁用/启用它们时再次找到所有选项。

http://jsfiddle.net/uj86d/

HTML 

<select>
    <option value="test1" class="red">Test 1</option>
    <option value="test2">Test 2</option>
    <option value="test3" class="red">Test 3</option>
    <option value="test4">Test 4</option>
</select>
<select>
    <option value="test1">Test 1</option>
    <option value="test2" class="red">Test 2</option>
    <option value="test3">Test 3</option>
    <option value="test4" class="red">Test 4</option>
</select>
<button>Disable reds!</button>

JS 

//disable all options with a red class
document.querySelector('button').addEventListener('click', function () {
    var redOptions = document.querySelectorAll('option.red'),
        i = 0,
        len = redOptions.length;
    for (; i < len; i++) {
        redOptions[i].disabled = true;
    }
});
相关文章：