Saltar al contenido

¿Cómo establecer el valor seleccionado de jquery select2?

Solución:

SELECCIONAR2


Paso 1: HTML

<input name="mySelect2" type="hidden" id="mySelect2">

Paso 2: Crea una instancia de Select2

$("#mySelect2").select2({
      placeholder: "My Select 2",
      multiple: false,
      minimumInputLength: 1,
      ajax: {
          url: "/elements/all",
          dataType: 'json',
          quietMillis: 250,
          data: function(term, page) {
              return {
                  q: term,
              };
          },
          results: function(data, page) {
              return {results: data};
          },
          cache: true
      },
      formatResult: function(element){
          return element.text + ' (' + element.id + ')';
      },
      formatSelection: function(element){
          return element.text + ' (' + element.id + ')';
      },
      escapeMarkup: function(m) {
          return m;
      }
});

Paso 3: Establezca su valor deseado

$("#mySelect2").select2('data', { id:"elementID", text: "Hello!"});

Si utiliza select2 sin AJAX puedes hacer lo siguiente:

<select name="mySelect2" id="mySelect2">
  <option value="0">One</option>
  <option value="1">Two</option>
  <option value="2">Three</option>
</select>
/* "One" will be the selected option */
$('[name=mySelect2]').val("0");

También puede hacerlo:

$("#mySelect2").select2("val", "0");

SELECT2 V4


Para select2 v4 puede agregar directamente una opción o opciones de la siguiente manera:

<select id="myMultipleSelect2" multiple="" name="myMultipleSelect2[]">
    <option value="TheID" selected="selected">The text</option>                                                                   
</select>

O con JQuery:

var $newOption = $("<option selected='selected'></option>").val("TheID").text("The text")
 
$("#myMultipleSelect2").append($newOption).trigger('change');

otro ejemplo

$("#myMultipleSelect2").val(5).trigger('change');

Para establecer dinámicamente el valor “seleccionado” de un componente Select2:

$('#inputID').select2('data', {id: 100, a_key: 'Lorem Ipsum'});

Donde el segundo parámetro es un objeto con valores esperados.

ACTUALIZAR:

Esto funciona, solo quería tener en cuenta que en el nuevo select2, “una llave” es “texto” en un objeto select2 estándar. asi que: {id: 100, text: 'Lorem Ipsum'}

Ejemplo:

$('#all_contacts').select2('data', {id: '123', text: 'res_data.primary_email'});

Gracias a @NoobishPro

HTML:

<select id="lang" >
   <option value="php">php</option>
   <option value="asp">asp</option>
   <option value="java">java</option>
</select>

JavaScript:

$("#lang").select2().select2('val','asp');

jsfiddle

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *