Question

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

我打算禁用的选项可以共享某些特征，即它们每个都有两个类别。所有列表中的许多选项共享相同的类，我想添加几个按钮，根据这些类启用或禁用选项。

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

by select element
按编号。

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

这是其中一个下拉列表的片段：

<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;
    }
});

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

1 个答案: