Мне нужно добавить опцию «Добавить новый элемент» в Select2

Question

Я хочу добавить кнопку в первом элементе списка в «Добавить новый элемент». Если пользователь нажимает на эту кнопку, мне нужно открыть всплывающее окно и получить данные от пользователей. Как это сделать в плагине select2? Являются ли какие-либо параметры по умолчанию для этого (или) необходимости настроить это?

Answer 1

Вы можете добавить новую опцию в выбор2 таким образом

$('button').click(function(){ 
    var value = prompt("Please enter the new value"); 
    $(".mySelect") 
    .append($("<option></option>") 
    .attr("value", value) 
    .text(value)); 

}) 

Answer 2

в основном то, что предложенный KLD, но без дополнительных кнопок, как я понимаю, OP хочет использовать первый вариант select для запуска нового значения модальной. Он проверяет значение, когда выбрано событие select2: close, и если выбрано "NEW", запрашивает новое значение, добавляет в конце select поле и выбирает его.

ПРИМЕЧАНИЕ: Я отключил поиск в вход и добавлен заполнитель

$(function() { 
 
    $(".select2") 
 
    .select2({ 
 
    placeholder: 'Select type', 
 
    width: '50%', 
 
    minimumResultsForSearch: Infinity 
 
    }) 
 
    .on('select2:close', function() { 
 
    var el = $(this); 
 
    if(el.val()==="NEW") { 
 
     var newval = prompt("Enter new value: "); 
 
     if(newval !== null) { 
 
     el.append('<option>'+newval+'</option>') 
 
      .val(newval); 
 
     } 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> 
 
<select id="mySel" class="select2"> 
 
    <option></option> 
 
    <option value="NEW">Add new type</option> 
 
    <option>Car</option> 
 
    <option>BUS</option> 
 
    <option>TWO</option> 
 
    <option>THREE</option> 
 
</select>

Answer 3

Может быть, вы должны использовать tags варианты?

https://select2.github.io/options.html#can-options-be-created-based-on-the-search-term

Answer 4

jQuery("#select2-"+yourelementid+"-container").off().on('click',function(){ 
         jQuery("#yourelementid"_add").remove(); 
         jQuery("#select2-"+yourelementid+"-results").after("<div id='"+yourelementid+"_add' >optionnameforadding</div> ").promise().done(function(){ 
          jQuery("#"+yourelementid+"_add").off().on('click',function(){ 
          // yourfunctionfordisplayingdiv 
          }); 
         }); 
        }); 

вы можете добавить содержимое HTML после списка уль - ВЫБ.2 - "+ yourelementid +" - результаты, и делать все, что вы можете с ним. просто установить результат как вал в поле выбора

check the image out

Answer 5

Вот мой подход

$('#select2') 
    .select2() 
    .on('select2:open',() => { 
     $(".select2-results:not(:has(a))").append('<a href="#" style="padding: 6px;height: 20px;display: inline-table;">Create new item</a>'); 
}) 

Answer 6

После покопаться по этому вопросу в течение достаточно долгого времени ... Я думаю, У меня есть решение этой проблемы.

Я заметил, что Select2, кажется, создает свою собственную структуру внутри DOM - независимо от того, с кем вы взаимодействуете. - Это также совершенно не зависит от выбора, который вы, возможно, создали в другом месте DOM.

Так .... После того, как некоторые пустячный вокруг - я придумал следующий код:

Первое: Создание глобального связывания для всех Selects в DOM. Это только для установки временной ссылки на «то, с чем» работает текущий пользователь, - создание глобальной переменной, которая может быть использована позже.

 $('select').select2().on('select2:open', function() { 
         // set a global reference for the current selected Select 
         console.log('found this ---> '+$(this).attr('id')); 
         if (typeof tempSelectedObj === 'undefined') { 
          tempSelectedObj = null; 
         } 
         tempSelectedObj = this; 
        }); 

Второе: Создать «» KeyUp события документа, который отображается на временный ВХОД Select2 и класс Выбор2-search__field. Это приведет к захвату всех ключевых событий для Select2 INPUT. Но в этом случае я добавил keyCode === 13 (символ возврата), чтобы начать волшебство.

$(document).on('keyup','input.select2-search__field',function (e) { 
        // capture the return event 
        if (e.keyCode === 13) { 

         var newValue = $(this).val(); 
         console.log('processing this: '+newValue); 

         // create new option element 
         var newOpt = $('<option>') 
          .val(newValue) 
          .text(newValue); 

         // append to the current Select 
         $(tempSelectedObj) 
          .append(newOpt); 

         // apply the change and set it 
         $(tempSelectedObj) 
          .val(newValue) 
          .select2('close'); 
        } 
       }) 

При обнаружении символа возврата происходит следующее.

• захвата текущее значение
• создать новый DOM Option Element (JQuery)
• установить значение и текст нового варианта Элемент
• добавляемых новый Option Элемент переменной tempSelectedObj (JQuery)
• пускового механизм выбор2, чтобы закрыть
• установить значение выбор2 на новое значение добавляется
• триггера конечных изменений выбор2 к ди перевести новый вариант
• DONE!

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

Надеюсь, это поможет! Я боролся с этим на некоторое время.

Вот рабочий пример:

https://jsfiddle.net/h690bkmg/1/

Answer 7

$('#my-select2').select2().on('select2:open', function() { 
      var a = $(this).data('select2'); 
      if (!$('.select2-link').length) { 
       a.$results.parents('.select2-results') 
         .append('<div class="select2-link"><a>New item</a></div>') 
         .on('click', function (b) { 
          a.trigger('close'); 

          // add your code 
         }); 
     } 
    });