Dependent multi-select Element

Question

I'm trying to create a multi-select element in HTML with 5 options

<select name="user" id="userName" multiple="multiple">
  <option>ALL</option>
  <option>ALL_2</option>
  <option>ABC</option>
  <option>XYZ</option>
  <option>PQR</option>
</select>

I'd like to have ALL and ALL_2 to be single selects. In that, what I mean is that if other options are selected along with ALL (or) ALL_2, then ALL (or) ALL_2 are to be deselected).

Ex: Selecting ALL/ALL_2 and then Ctrl + ABC, XYZ should be prevented (or) ALL should be deselected.

Selecting ABC,XYZ,PQR and then selecting ALL / ALL_2 should be prevented (or) ABC,XYZ,PQR should be deselected.

I'm looking to do this via MooTools/jQuery by looping through all options to select / deselect, but looking to see if there is a better way to do it since there could be a lot more than 5 options.

Summary : Options 3-5 are multi-selects but should not be used as multi-selects together with options 1 and 2. Apologies if this is confusing, tried to put my best to communicate it clearly.

Answer 1

$('#user_name optgroup option').click(function () {
    // only affects options contained within the same optgroup
    // and doesn't include this
    $(this).siblings().prop('selected', false);
});

Something like this should work for you. Just group the option s to an optgroup . Here's a working example .