Edit Question - KnowledgeHub

Title Body

I have a select element with grouped option s. I need to select (or deselect) all option s in an optgroup when an option is clicked. I also need to be able to have multiple optgroup s 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",

Tags (comma-separated) Cancel