2017-01-04 22 views
0

У меня есть select коробка с кратному optgroup как:Limit Выбор2 к одному выбору на OPTGROUP с множественным выбором в версии 4.0

<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, заменив предыдущую выбранные option, например:

Если я выбираю «Title 1 A» из первой optgroup и «Title 2 A» из второй optgroup, тогда я выбираю «Title 1 C» из первой optgroup, результат «Title 1 C "и" Название 2 A ".

Я использую Select2 v4.0.3.

Я нашел это решение: Limit select2 selections by group Но для Select2 v3.5.2 и он несовместим с новой версией.

+0

Пробовали ли вы написать что-то самостоятельно? Добавьте код. – Dekel

+0

Думаю, для этого нужно написать собственный код, а не 'Select2', имеющий свой собственный вариант. И обратите внимание, что вы повторяете значения. –

+0

Поиск ... Поиск ... Поиск ... –

ответ

0

Хорошо, я придумал решение, которое вы, вероятно, сможете адаптировать. 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> 

Вы заметите, что я добавил атрибут идентификатор группы. Это используется для установления взаимосвязи между опциями.

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; 
     } 
    }) 
    } 
+0

здесь он на jsFiddle https://jsfiddle.net/bindrid/hpkqxto6/ – Bindrid

 Смежные вопросы

  • Нет связанных вопросов^_^