12
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",