Grenze Select2 auf eine Auswahl pro optgroup mit Mehrfachauswahl in der Version 4.0

Question

Ich habe eine select Box mit mehreren optgroup wie:

<select id="g1" class="select" multiple="multiple"> 
    <option></option> 
    <optgroup label="Group 1"> 
     <option value="1">Title 1 A</option> 
     <option value="2">Title 1 B</option> 
     <option value="3">Title 1 C</option> 
    </optgroup> 
    <optgroup label="Group 2"> 
     <option value="4">Title 2 A</option> 
     <option value="5">Title 2 B</option> 
     <option value="6">Title 2 C</option> 
    </optgroup> 
    </select> 

ich brauchen würde, meine selectbox auf eine Option pro optgroup zu begrenzen, die vorherige ersetzt ausgewählt Option, Beispiel:

Wenn ich "Titel 1 A" aus der ersten optgroup und "Titel 2 A" aus der zweiten optgroup wähle, wähle ich "Titel 1 C" aus der ersten optgroup das Ergebnis ist "Titel 1 C "und" Titel 2 A ".

Ich verwende Select2 v4.0.3.

Ich fand diese Lösung: Limit select2 selections by group Aber ist für Select2 v3.5.2 und es ist nicht kompatibel mit der neuen Version.

Answer 1

Ok, ich kam mit einer Lösung, die Sie wahrscheinlich anpassen können. Opt-Gruppen sind nicht in der Lage, sollten aber trotzdem funktionieren.

HTML:

<select multiple style="width: 300px"> 
    <option groupid="a" value="A_AK">Alaska</option> 
    <option groupId="b" value="B_HI">Hawaii</option> 
    <option groupid="c" value="C_CA">California</option> 
    <option groupid="a" value="D_NV">Nevada</option> 
    <option groupid="b" value="A_OR">Oregon</option> 
    <option groupid="c" value="B_WA">Washington</option> 
    <option groupid="a" value="C_AZ">Arizona</option> 
    <option groupid="b" value="D_CO">Colorado</option> 
    <option groupid="c"value="A_ID">Idaho</option> 
    <option groupid="a" value="B_MT">Montana</option> 
    <option groupid="b" value="C_NE">Nebraska</option> 
    <option groupid="c" value="D_NM">New Mexico</option> 
    <option groupid="a" value="A_ND">North Dakota</option> 
    <option groupid="b"value="B_UT">Utah</option> 
    <option groupid="c" value="C_WY">Wyoming</option> 
</select> 

Sie werden feststellen, dass ich die Gruppe id-Attribut hinzugefügt. Dies wird verwendet, um die Beziehung zwischen den Optionen festzustellen.

JavaScript:

$(function() { 
    $('select').select2({ 
     allowClear: true, 
     placeholder: "Pick a State" 
    }); 

    //Select2 Event handler for selecting an item 
    $('select').on("select2:selecting", function(evt, f, g) { 
     disableSel2Group(evt, this, true); 
    }); 

    // Select2 Event handler for unselecting an item 
    $('select').on("select2:unselecting", function(evt) { 
     disableSel2Group(evt, this, false); 
    }); 
    }); 


    // At some point during the select2 instantation it created the 
    // data object it needs with the source select option. 
    // This function, called by the events above to set the current status for the 
    // group for which the selected option belongs. 
    function disableSel2Group(evt, target, disabled) { 
    // Found a note in the Select2 formums on how to get the item to be selected 

    var selId = evt.params.args.data.id; 
    var group = $("option[value='" + selId + "']").attr("groupid"); 

    var aaList = $("option", target); 
    $.each(aaList, function(idx, item) { 
     var data = $(item).data("data"); 

     var itemGroupId = $("option[value='" + data.id + "']").attr("groupid"); 
     if (itemGroupId == group && data.id != selId) { 
     data.disabled = disabled; 
     } 
    }) 
    }