Select unique option in multiple select box with option group

Question

Hi,

I have a multiple select box with options group like:

<select id="sel_salaryrange" name="salaryranges[]" size="8" multiple="1">
    <optgroup label="PKR" class="PKR">
        <option value="1">15000 - 20000</option>
        <option value="2">18000 - 35000</option>
        <option value="3" selected="selected">50000 - 100000</option>
    </optgroup>
    <optgroup label="SAR" class="SAR">
        <option value="4">1000 - 2000</option>
        <option value="6" selected="selected">3000 - 5000</option>
    </optgroup>
    <optgroup label="USD" class="USD">
        <option value="5">1000 - 3000</option>
    </optgroup>
</select>

i.e. there are 3 options group name: 'PKR', 'SAR' and 'USD' where 2 items are selected in 'PKR' and 'SAR' option group. Now I want to disallow the multiple selection within same option group, how it would be resolve through jQuery or JavaScript, JQuery will be preferable.

I would be very thankful to you in this regard.

Thanks

Answer 1

Try this:

$('select#sel_salaryrange option').mousedown(function() {
    $(this).parent().find('option:selected').removeAttr('selected');
});

When the user clicks an option, this code clears all the selections in the current optgroup and allows the clicked one to be selected.

This code has one obvious drawback: the user can still choose multiple values using the keyboard.

I'd rather do this with separate radio inputs, or atleast with separate selects that are not multiple.

Answer 2

Bit tricky this one — I don’t think there are any suitable events you can listen for on the <option> tags to check when they’re selected. You’d have to listen for the change event on the <select> tag, and keep track of what’s selected and what’s not yourself.

Could you split it up into several <select>s that don’t have the multiple attribute?