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

Question

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

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

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

1. 通过选择元素
2. 按编号。

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

这是其中一个下拉菜单的 sn-p：

<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 量，以加快响应速度。有没有一种方法可以选择任何特定类的所有下拉列表中的所有选项？

Answer 1

这是一种方法。如果您有这么多选项并且它们没有更改，请考虑缓存 document.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;
    }
});