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

Issue

I have a page with multiple dropdowns and I want to disable multiple options in all of those dropdowns.

The options I aim to disable share certain characteristics, namely that they're identified with two classes each. Many of the options in all the lists share the same classes and I want to add several buttons that enable or disable options based on those classes.

My issue is, that the standard ways I have seen here target options

1. by select element
2. by number.

But mine are dynamically generated and the options that I'm trying to disable are not always next to each other.

Here's a snippet of one of the dropdowns:

<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>

This is by no means an exhaustive list, there's a couple of hundred options for each dropdown, though all the dropdowns contain the same list. As you can see, the list is sorted alphabetically, not by class.

I am looking to disable and enable options with a button based on one of the two classes, and a disabled status should override an enabled status. The standard document.getElementById('m1').options[number].disabled doesn't really help me here as the list is dynamically generated and I do not know where a specific option will end up.

Part of the site's aim is to minimize the amount of reloading needed and at the same time minimize the amount of javascript being executed, to speed up responsiveness. Is there a way I can select all options in all of the dropdowns that are of any specific class?

Solution

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

Answered By - plalx

Answer Checked By - Pedro (PHPFixing Volunteer)