限制選擇二至每OPTGROUP一個選擇，在版本多重選擇4.0

Question

我有一個select箱多optgroup，如：

<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> 

我需要我的選擇框限制爲每OPTGROUP一個選項，替代選擇以前選項，例如：

如果我從第一個optgroup中選擇「Title 1 A」，並從第二個optgroup中選擇「Title 2 A」，則從第一個optgroup中選擇「Title 1 C」，結果爲「Title 1 C 「和」標題2A「。

我正在使用Select2 v4.0.3。

我發現這個解決方案：Limit select2 selections by group 但是適用於Select2 v3.5.2，它與新版本不兼容。

Answer 1

好吧，我想出了一個可能適應的解決方案。 Optgroups沒有出現，但應該無論如何工作。

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> 

你會發現，我添加的組id屬性。這用於建立選項之間的關係。

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