Ящик с множественным выбором с Optgroups: выберите по одному на группу

Question

У меня есть selectbox с установленным атрибутом multiple. Я также использую теги <optgroup> для разделения категорий в окне выбора. Я ищу способ, используя либо javascript, либо jQuery, чтобы различные параметры в каждой группе работали с «логикой переключателя», а не «логикой флажка». Например:

<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. Пользователь выбирает item 1.1 в списке. item 1.1 выбрано как ожидалось.
2. Пользователь выбирает item 2.1 в списке. Теперь выбраны item 1.1 и item 2.1.
3. Пользователь выбирает item 1.2 в списке. Теперь item 1.1 не выбран, а item 2.1 и item 1.2 оба выбраны.

Это имеет смысл? Заранее спасибо!

Answer 1

$('#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);
});​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Хотя, по правде говоря, если вы хотите "логику радиокнопок", вы можете подумать о том, чтобы не использовать поле множественного выбора.Удобство использования с несколькими полями выбора в любом случае является проблемой (люди должны нажимать, удерживая клавишу Ctrl, чтобы выбрать более одного варианта).Подумайте об использовании радиокнопок или об использовании единого поля выбора для каждой группы.Оба сложнее испортить.И они работают без JS, что в значительной степени всегда плюс.