Multiselect-Box mit Optgruppen: Wählen Sie eine pro Gruppe

Question

Ich habe eine Auswahlbox mit dem Attribut multiple festgelegt. Ich verwende auch <optgroup> Tags, um Kategorien innerhalb meiner Auswahlbox zu trennen. Ich suche nach einem Weg, entweder javascript oder jQuery, um die verschiedenen Optionen innerhalb jeder Gruppe zu haben, sich mit "Radio-Button-Logik" statt "Check-Box-Logik" zu verhalten. Zum Beispiel:

<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. Der Benutzer wählt item 1.1 in der Liste. item 1.1 ist wie erwartet ausgewählt.
2. Der Benutzer wählt item 2.1 in der Liste aus. Jetzt sind sowohl item 1.1 als auch item 2.1 ausgewählt.
3. Benutzer wählt item 1.2 in der Liste aus. Jetzt ist item 1.1 abgewählt, während item 2.1 und item 1.2 beide ausgewählt sind.

Macht das Sinn? Danke im Voraus!

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); 
});​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

Obwohl, ehrlich gesagt, wenn Sie "Radiobutton-Logik" möchten, könnten Sie erwägen, keine Mehrfachauswahlbox zu verwenden. Die Benutzerfreundlichkeit mit mehreren Auswahlfeldern ist trotzdem ein Problem (Benutzer müssen mit einem Klick klicken, um mehr als eine Option auszuwählen). Ziehen Sie die Verwendung von Optionsfeldern in Betracht oder verwenden Sie für jede Gruppe ein Auswahlfeld. Beides ist schwieriger zu vermasseln. Und sie arbeiten ohne JS, was fast immer ein Plus ist.