Easy way to quick select a whole optgroup in select box

javascript html optgroup
blub picture blub · Sep 24, 2009 · Viewed 12k times · Source

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

Brandon Belvin picture Brandon Belvin · Sep 24, 2009

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.

Related questions

How to hide optgroup/option elements?

Is there a way to hide option or optgroup HTML elements? I've tried calling hide() in jQuery, and also using regular Javascript to set style.display='none'. It works in Firefox but not in any other browsers. Actually removing them …

Read More
How do I check whether a checkbox is checked in jQuery?

I need to check the checked property of a checkbox and perform an action based on the checked property using jQuery. For example, if the age checkbox is checked, then I need to show a textbox to enter age, else …

Read More
How can I change an element's class with JavaScript?

How can I change the class of an HTML element in response to an onclick or any other events using JavaScript?

Read More