I have a select element with grouped options. I need to select (or deselect) all options in an optgroup when an option is clicked. I also need to be able to have multiple optgroups being selected at once.

The way I wish it to work is this:

  • If nothing is selected, I want to click one option and get all of the options in the same optgroup selected.
  • If one or more optgroups are already selected, I want to click one option in another optgroup and have all those options selected instead.
  • If one or more optgroups are already selected, I want to be able to Ctrl-click an option in a non-selected optgroup and have all of the options in that optgroup selected too.
  • If one or more optgroups are already selected, I want to be able to Ctrl-click an option in a selected optgroup and have all the options in that group deselected.

Looking at other answers on Stack Overflow I created the following:

HTML:

<select multiple="multiple" size="10">
    <optgroup label="Queen">
        <option value="Mercury">Freddie</option>
        <option value="May">Brian</option>
        <option value="Taylor">Roger</option>
        <option value="Deacon">John</option>
    </optgroup>
    <optgroup label="Pink Floyd">
        <option value="Waters">Roger</option>
        <option value="Gilmour">David</option>    
        <option value="Mason">Nick</option>                
        <option value="Wright">Richard</option>
    </optgroup>
</select>

jQuery:

$('select').click(selectSiblings);
function selectSiblings(ev) {
    var clickedOption = $(ev.target);
    var siblings = clickedOption.siblings();
    if (clickedOption.is(":selected")) {
        siblings.attr("selected", 
Edit
Report