Easy way to quick select a whole optgroup in select box

Question

I have a select box in which i can select multiple options. In the select box are multiple optgroups. Is there an easy way to select a whole optgroup at once in javascript?

Answer 1

I suggest using jQuery (or another framework) to quickly handle DOM selections. Give each optgroup a class to make it easier to grab it.

$("optgroup.className").children().attr('selected','selected');

If you want to select the entire group based on the user selecting the group, do the following:

$("optgroup.className").select(function(e) {
  $(this).children().attr('selected','selected');
});

**Both examples are untested pseudo-code, but they should work with minimal changes, if necessary.

If you cannot use a framework, you'll have to traverse the DOM yourself to find the optgroup and children. You could attach a listener to the select element to grab the element being selected then traverse to the children that way, too.

Answer 2

I'm normally against using jQuery for simple jobs like this but I can see its value here. Still, if you prefer a non-jQuery solution that will have the benefits of using no library, introducing no spurious ids or classes and running faster, here is one:

<script type="text/javascript">

function selectOptGroupOptions(optGroup, selected) {
    var options = optGroup.getElementsByTagName("option");
    for (var i = 0, len = options.length; i < len; i++) {
        options[i].selected = selected;
    }
}

function selectOptGroup(selectId, label, selected) {
    var selectElement = document.getElementById(selectId);
    var optGroups = selectElement.getElementsByTagName("optgroup");
    var i, len, optGroup;
    for (i = 0, len = optGroups.length; i < len; i++) {
        optGroup = optGroups[i];
        if (optGroup.label === label) {
            selectOptGroupOptions(optGroup, selected);
            return;
        }
    }
}

</select>

<select id="veg" multiple>
    <optgroup label="roots">
        <option>Swede</option>
        <option>Carrot</option>
        <option>Turnip</option>
    </optgroup>
    <optgroup label="leaves">
        <option>Spinach</option>
        <option>Kale</option>
    </optgroup>
</select>

<input type="button" onclick="selectOptGroup('veg', 'roots', true)" value="Select roots">

If your <optgroup> has an id you could do away with the selectOptGroup function and just pass the optgroup straight into selectOptGroupOptions.