Muszę dodać opcję "Dodaj nowy element" w Select2

Question

Chcę dodać przycisk w pierwszym elemencie listy do "Dodaj nowy element". Jeśli użytkownik kliknie na ten przycisk, muszę otworzyć wyskakujące okienko i uzyskać dane od użytkowników. Jak to zrobić w plugin select2? Czy jakiekolwiek domyślne opcje tego (lub) wymagają dostosowania tego?

Answer 1

Możesz dodać nową opcję do Select2 tędy

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

}) 

Answer 2

zasadzie co sugerowane KLD, ale bez dodatkowych przycisków jak rozumiem PO chce wykorzystać pierwszą opcję select wywołać nową wartość modalna. Sprawdza wartość po wywołaniu zdarzenia select2: close i wybraniu "NEW", wyświetla monit o podanie nowej wartości, dodaje na końcu pola select i wybiera go.

UWAGA: mam przeszukiwanie niepełnosprawnych w wejściu i dodał zastępczy

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

może być należy użyć tags opcji?

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

można dodać zawartość HTML po wykazie ul - select2 - "+ yourelementid +" - wyniki, i robić, co można z nim. wystarczy ustawić wynik jako Val z zaznaczonym polu

check the image out

Answer 5

Oto moje podejście

$('#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

Po kopania wokół na ten temat od dłuższego czasu ... Ja myśl Mam rozwiązanie tego problemu.

Zauważyłem, że Select2 wydaje się tworzyć własną strukturę w DOM - niezależnie od Select, z którym współpracujesz. - Wydaje się, że jest to całkowicie niezależne od selekcji, którą możesz utworzyć w innym miejscu w DOM.

Więc .... Po jakiś błahy wokół - wpadłem na następujący kod:

pierwsze: Tworzenie globalnej wiążące dla wszystkich Wybiera w DOM. Jest to tylko ustawienie chwilowego odniesienia do "tego, z czym pracuje bieżący użytkownik" - tworzenie zmiennej globalnej, która może być później używana.

 $('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; 
        }); 

drugie: Utwórz dokument 'keyup' wydarzenie, które są mapowane do tymczasowego WEJŚCIE Select2 i klasy select2-search__field. Spowoduje to przechwycenie wszystkich kluczowych zdarzeń dla Select2 INPUT. Ale w tym przypadku dodałem keyCode === 13 (znak powrotu), aby zainicjować magię.

$(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'); 
        } 
       }) 

Po wykryciu znaku zwrotnego następuje:

• przechwytywania aktualna wartość
• utworzyć nową opcję DOM element (jQuery)
• ustawioną wartość i tekstu nową opcję Element
• dołączy nowa opcja Element zmiennej tempSelectedObj (jQuery)
• spust Wybór2 zamknąć
• ustawić wartość Select2 do nowej wartości dołączane
• spust ostateczna zmiana Wybór2 do dI rozłóż nową opcję
• ZOSTAŁA ZROBIONA!

Oczywiście dla tego przykładu wymagane są dwie sekcje kodu, ale uważam, że jest to całkiem zgrabne podejście do problemu, z którym wiele osób zmaga się. Jest też wystarczająco uniwersalny, by z łatwością można go było dostosować do innych celów.

Mam nadzieję, że to pomoże! Walczyłem z tym przez jakiś czas.

Oto przykład roboczych:

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