I have a selectbox with the multiple attribute set. I'm also using <optgroup> tags to separate categories within my select box. I'm looking for a way, using either javascript or jQuery, to have the various options within each group to behave with 'radio button logic' rather than 'check box logic'. For example:

<optgroup label="cat1">
    <option>item 1.1</option>
    <option>item 1.2</option>
</optgroup>
<optgroup label="cat2">
    <option>item 2.1</option>
    <option>item 2.2</option>
</optgroup>

1. User selects item 1.1 in the list. item 1.1 is selected as expected.
2. User selects item 2.1 in the list. Now both item 1.1 and item 2.1 are selected.
3. User selects item 1.2 in the list. Now item 1.1 is deselected, while item 2.1 and item 1.2 are both selected.

Does that make sense? Thanks in advance!

I have a selectbox with the multiple attribute set. I'm also using <optgroup> tags to separate categories within my select box. I'm looking for a way, using either javascript or jQuery, to have the various options within each group to behave with 'radio button logic' rather than 'check box logic'. For example:

<optgroup label="cat1">
    <option>item 1.1</option>
    <option>item 1.2</option>
</optgroup>
<optgroup label="cat2">
    <option>item 2.1</option>
    <option>item 2.2</option>
</optgroup>

1. User selects item 1.1 in the list. item 1.1 is selected as expected.
2. User selects item 2.1 in the list. Now both item 1.1 and item 2.1 are selected.
3. User selects item 1.2 in the list. Now item 1.1 is deselected, while item 2.1 and item 1.2 are both selected.

Does that make sense? Thanks in advance!

• javascript
• jquery
• html
• multi-select
• drop-down-menu

Share Improve this question Follow asked Apr 2, 2012 at 22:43 mbeasleymbeasley 4,87455 gold badges3030 silver badges3939 bronze badges 1

• 1 Thought about using actual radio buttons for this radio button logic? – aaaidan Commented Apr 2, 2012 at 22:49

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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

Although, truth be told, if you want "radio button logic", you might consider not using a multiple select box. Usability with multiple select boxes is a pain anyway (people have to ctrl-click to select more than one option). Consider using radio buttons, or using a single-select box for each group. Both are harder to mess up. And they work without JS, which is pretty much always a plus.