multiple - Agregue dinámicamente el elemento al control jQuery Select2 que usa AJAX

select2 selected

Question

Tengo un control jQuery Select2 que usa AJAX para poblar:

<input type="text" name="select2" id="select2" style=''width:400px'' value="999">

var initialSelection = { id: ''999'', text:"Some initial option"};

$("#select2").select2({
    placeholder: "Select Option",
    minimumInputLength: 2,
    ajax: { 
        url: "/servletToGetMyData",
        dataType: ''json'',
        data: function (term, page) { return { term: term }; },
        results: function (data, page) {  return { results: data.results} }
    },
    initSelection : function(element, callback){ callback(initialSelection); },     
    escapeMarkup: function (m) { return m; }
}); 

El AJAX se vincula a una base de datos de posibles opciones y, como puede ver, requiere dos caracteres de entrada.

El problema es que el usuario puede usar un cuadro de diálogo para agregar una nueva opción si la opción no existe en la base de datos. A la vuelta de ese diálogo, intento:

var o = $("<option/>", {value: newID, text: newText});
$(''#select2'').append(o);
$(''#select2 option[value="'' + newID + ''"]'').prop(''selected'',true);
$(''#select2'').trigger(''change'');

Pero no funciona. El mismo código exacto funciona para cajas que no sean AJAX Select2. He intentado varias alternativas, como usar $(''#select2'').select2("val", newID); pero no funciona.

Incluso he tratado de eliminar por completo el control Select2. Sin embargo, $(''#select2'').remove() solo elimina el campo <input> original pero deja el control Select2 persistente. Tenga en cuenta que la página tiene más de un control Select2, por lo que no puedo usar un selector de clase para los controles Select2 ya que eliminará otros controles que necesito.

Alguna idea de cómo a) agregar dinámicamente una opción a un control Select2 que usa AJAX; o b) elimine por completo un control Select2 para que pueda ser agregado programáticamente de nuevo? O cualquier otra solución ...

Editar Encontré otra pregunta que muestra cómo eliminar un elemento select2, usando .select2 ("destroy"). Esto funciona pero, en mi opinión, no es óptimo. Preferiría poder agregar la opción que destruir y volver a crear select2.

Answer 1

En Select2 4.0.2

$("#yourId").append("<option value=''"+item+"'' selected>"+item+"</option>");
$(''#yourId'').trigger(''change''); 

Answer 2

En caso de Select2 Version 4+

ha cambiado la sintaxis y debe escribir de esta manera:

// clear all option
$(''#select_with_blank_data'').html('''').select2({data: [{id: '''', text: ''''}]});

// clear and add new option
$("#select_with_data").html('''').select2({data: [
 {id: '''', text: ''''},
 {id: ''1'', text: ''Facebook''},
 {id: ''2'', text: ''Youtube''},
 {id: ''3'', text: ''Instagram''},
 {id: ''4'', text: ''Pinterest''}]});

Answer 3

Esto es mucho más fácil de hacer a partir de select2 v4. Puede crear una new Option y agregarla al elemento de select directamente. Ver mi codepen o el siguiente ejemplo:

$(document).ready(function() {
    $("#state").select2({
      tags: true
    });
      
    $("#btn-add-state").on("click", function(){
      var newStateVal = $("#new-state").val();
      // Set the value, creating a new option if necessary
      if ($("#state").find("option[value=" + newStateVal + "]").length) {
        $("#state").val(newStateVal).trigger("change");
      } else { 
        // Create the DOM option that is pre-selected by default
        var newState = new Option(newStateVal, newStateVal, true, true);
        // Append it to the select
        $("#state").append(newState).trigger(''change'');
      } 
    });  
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>


<select id="state" class="js-example-basic-single" type="text" style="width:90%">
  <option value="AL">Alabama</option>
  <option value="WY">Wyoming</option>
</select>
<br>
<br>
<input id="new-state" type="text" />
<button type="button" id="btn-add-state">Set state value</button>

Sugerencia: intente ingresar valores existentes en el cuadro de texto, como "AL" o "WY". Luego intenta agregar algunos valores nuevos.

Answer 4

Esto proporcionó una solución simple: establecer datos en Select2 después de insertar con AJAX

$("#select2").select2(''data'', {id: newID, text: newText});      

Answer 5

Extendiéndose en la respuesta Bumptious Q Bangwhistle:

$(''#select2'').append($(''<option>'', { 
    value: item,
    text : item 
})).select2();

Esto agregaría las nuevas opciones en las etiquetas <select> y permite select2 volver a procesarlo.

Answer 6

He resuelto el problema con la ayuda de este enlace http://www.bootply.com/122726 . con suerte te ayudará

Agregue la opción en select2 jquery y enlace su llamada ajax con el ID del enlace creado (#addNew) para la nueva opción desde el back-end. y el código

 $.getScript(''http://ivaynberg.github.io/select2/select2-3.4.5/select2.js'',function(){

  $("#mySel").select2({
    width:''240px'',
    allowClear:true,
    formatNoMatches: function(term) {
        /* customize the no matches output */
        return "<input class=''form-control'' id=''newTerm'' value=''"+term+"''><a href=''#'' id=''addNew'' class=''btn btn-default''>Create</a>"
    }
  })
  .parent().find(''.select2-with-searchbox'').on(''click'',''#addNew'',function(){
    /* add the new term */
    var newTerm = $(''#newTerm'').val();
    //alert(''adding:''+newTerm);
    $(''<option>''+newTerm+''</option>'').appendTo(''#mySel'');
    $(''#mySel'').select2(''val'',newTerm); // select the new term
    $("#mySel").select2(''close'');       // close the dropdown
  })

});



<div class="container">
    <h3>Select2 - Add new term when no search matches</h3>
    <select id="mySel">
        <option>One</option>
        <option>Two</option>
        <option>Three</option>
        <option>Four</option>
        <option>Five</option>
        <option>Six</option>
        <option>Twenty Four</option>
    </select>
    <br>
    <br>
</div>

Answer 7

Lo hice de esta manera y funcionó para mí como un encanto.

var data = [{ id: 0, text: ''enhancement'' }, { id: 1, text: ''bug'' }, { id: 2, 

    text: ''duplicate'' }, { id: 3, text: ''invalid'' }, { id: 4, text: ''wontfix'' }];

    $(".js-example-data-array").select2({
      data: data
    })

Answer 8

$("#my_select").select2(''destroy'').empty().select2({data: [{id: 1, text: "new_item"}]});