0

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

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

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

  1. 通过选择元素
  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 的数量，以加快响应速度。有没有办法可以选择任何特定类的所有下拉列表中的所有选项？

4

1 回答 1

1

Here's one way of doing it. If you have that many options and they don't change, consider caching the result of document.querySelectorAll so that you don't have to find all the options again each time you want to disable/enable them.

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;
    }
});
于 2013-03-30T14:39:43.057 回答