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

99

Esto pertenece a códigos anteriores a select2 versión 4

Tengo un código simple para select2obtener datos de ajax

$("#programid").select2({
  placeholder: "Select a Program",
  allowClear: true,
  minimumInputLength: 3,
  ajax: {
    url: "ajax.php",
    dataType: 'json',
    quietMillis: 200,
    data: function (term, page) {
      return {
        term: term, //search term
        flag: 'selectprogram',
        page: page // page number
      };
    },
    results: function (data) {
      return {results: data};
    }
  },
  dropdownCssClass: "bigdrop",
  escapeMarkup: function (m) { return m; }
});

Este código funciona, sin embargo, necesito establecer un valor como si estuviera en modo de edición. Cuando el usuario selecciona un valor por primera vez, se guardará y cuando necesite editar ese valor debe aparecer en el mismo menú de selección ( select2) para seleccionar el valor previamente seleccionado, pero no puedo encontrar la manera.

ACTUALIZAR:

El código HTML:

<input type="hidden" name="programid" id="programid" class="width-500 validate[required]">

El acceso programático Select2 no funciona con esto.

javascript php jquery ajax jquery-select2 Limpia los dos
fuente

Debería poder establecer el valor seleccionado en el html o usar$("#programid").val()

Explosion Pills

@ExplosionPills Negative, también lo intenté y obtuve un valor en blanco. ¿Cómo debo usar programid.val ()? Obtuve el valor del servidor, luego necesito configurarlo en este campo oculto de select2.

ClearBoth

@ClearBoth No estoy seguro si entiendo lo que quieres decir. ¿Está intentando establecer el valor "seleccionado" del componente Select2 en uno de los resultados recuperados por AJAX?

An Phan

@AnPhan Sí, ¿hay alguna manera de hacer eso?

ClearBoth

@ClearBoth Lo hay. Comprueba mi respuesta a continuación.

An Phan

61

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, "a_key" es "texto" en un objeto select2 estándar. entonces:{id: 100, text: 'Lorem Ipsum'}

Ejemplo:

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

Gracias a @NoobishPro

An Phan
fuente

1

Estaba intentando con la identificación solo select2 ('val', '1') pero no funcionó. Gracias

ClearBoth

6

Esto funciona, solo quería tener en cuenta que en el nuevo select2, "a_key" es "texto" en un objeto select2 estándar. entonces: {id: 100, texto: 'Lorem Ipsum'}

NoobishPro

2

lo mismo aquí en v4. Me he estado tirando de los pelos con este. No creo que sea posible sin recurrir a las soluciones de JavaScript. Buscando otro menú desplegable jQuery / Bootstrap Select2 ahora (2 días de tocar el violín con todos los métodos imaginables, ¡no hay alegría!)

MC9000

29

Select2 v4: $('#inputID').val(100).trigger('change') Ver select2.github.io/…

Paul

@NoobishPro & An Phan - Gracias por la respuesta y el comentario

Sinto

104

SELECCIONAR2 <V4

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 usa select2 sin AJAX , puede 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 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');

tomloprod
fuente

3

gatillo ('cambio'); es la parte importante

mihkov

$ ("# mySelect2"). select2 ("val", "0") - esto activará el evento jquery de cambios de valor. Cómo evitar que esto suceda. Por lo general, cuando el usuario envía el formulario, una vez hecho esto, restablezco todos los datos del formulario. Restablecer no restablecerá select2. El uso de select2 ("val", "0") activará cambios, lo cual es una locura, ya que el usuario no realiza ninguna acción.

jumper rbk

Versión 4 select2.org/programmatic-control/add-select-clear-items

Ryan

Elogiado por el .trigger ('cambio')

JP Dolocanog

23

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

Ahmad Tarawneh
fuente

2

cómo configurar por texto en lugar de val

Rizwan Patel

La pregunta era cómo hacer esto después de cargar con la llamada AJAX. Esta respuesta no funciona en este caso.

MC9000

esto activará cambios de valor select2 que serán extraños si tiene este evento para procesar, y se activó sin que el usuario lo hiciera

jumper rbk

17

Además, como lo intenté, cuando uso ajax en select2, ¡los métodos de control programático para establecer nuevos valores en select2 no funcionan para mí! Ahora escribo este código para resolver el problema:

$('#sel')
    .empty() //empty select
    .append($("<option/>") //add option tag in select
        .val("20") //set value for option to post it
        .text("nabi")) //set a text for show in select
    .val("20") //select option of select2
    .trigger("change"); //apply to select2

Puede probar el código de muestra completo en el enlace aquí: https://jsfiddle.net/NabiKAZ/2g1qq26v/32/
En este código de muestra hay un ajax select2 y puede establecer un nuevo valor con un botón.

Mostrar fragmento de código

$("#btn").click(function() {
  $('#sel')
    .empty() //empty select
    .append($("<option/>") //add option tag in select
      .val("20") //set value for option to post it
      .text("nabi")) //set a text for show in select
    .val("20") //select option of select2
    .trigger("change"); //apply to select2
});

$("#sel").select2({
  ajax: {
    url: "https://api.github.com/search/repositories",
    dataType: 'json',
    delay: 250,
    data: function(params) {
      return {
        q: params.term, // search term
        page: params.page
      };
    },
    processResults: function(data, params) {
      // parse the results into the format expected by Select2
      // since we are using custom formatting functions we do not need to
      // alter the remote JSON data, except to indicate that infinite
      // scrolling can be used
      params.page = params.page || 1;

      return {
        results: data.items,
        pagination: {
          more: (params.page * 30) < data.total_count
        }
      };
    },
    cache: true
  },
  escapeMarkup: function(markup) {
    return markup;
  }, // let our custom formatter work
  minimumInputLength: 1,
  templateResult: formatRepo, // omitted for brevity, see the source of this page
  templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
});

function formatRepo(repo) {
  if (repo.loading) return repo.text;

  var markup = "<div class='select2-result-repository clearfix'>" +
    "<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" +
    "<div class='select2-result-repository__meta'>" +
    "<div class='select2-result-repository__title'>" + repo.full_name + "</div>";

  if (repo.description) {
    markup += "<div class='select2-result-repository__description'>" + repo.description + "</div>";
  }

  markup += "<div class='select2-result-repository__statistics'>" +
    "<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> " + repo.forks_count + " Forks</div>" +
    "<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> " + repo.stargazers_count + " Stars</div>" +
    "<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> " + repo.watchers_count + " Watchers</div>" +
    "</div>" +
    "</div></div>";

  return markup;
}

function formatRepoSelection(repo) {
  return repo.full_name || repo.text;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://select2.org/assets/a7be624d756ba99faa354e455aed250d.css">

<select id="sel" multiple="multiple" class="col-xs-5">
</select>

<button id="btn">Set Default</button>

Expandir fragmento

Nabi KAZ
fuente

Estoy usando diferentes displayKey y esas cosas (aunque fue una mala idea); esto me ayuda con mis pruebas de aceptación con Codeception perfectamente

MonkeyMonkey

2

Tedioso, seguro, pero, como todo el mundo está descubriendo, Select2 v4 simplemente no tiene forma de hacer algo tan ridículamente simple como establecer una selección predeterminada

MC9000

Encontré que esta respuesta es la única forma de hacer select2 v4 - ajax select.

13

var $option = $("<option selected></option>").val('1').text("Pick me");

$('#select_id').append($option).trigger('change');

Pruebe este anexo y luego seleccione. No duplica la opción en la llamada AJAX.

Jigz
fuente

var $ option = $ ("<opción seleccionada> </option>") .val ('1'). text ("Pick me"); $ ('# select_id'). append ($ opción) .trigger ('cambiar');

Jigz

Gracias. trabajos confirmados en la versión 4.0.0 (llamada ajax)

khalil

Otro éxito confirmado en la versión 4 con ajax.

un codificador

Si está utilizando un cuadro de búsqueda con ajax, esta es la solución correcta. Este me funcionó en junio de 2019.

Eric Skiff

12

Me gustó esto

$("#drpServices").select2().val("0").trigger("change");

Ashi
fuente

2

Proporcione una explicación para ayudar a los usuarios a comprender cómo funciona su código y para responder la pregunta del OP.

Ivan

@Ivan, estaba haciendo así $ ("# drpServices"). Val ("0"); que no seleccionará el taxt en el menú desplegable select2, para afectar tanto el valor como el texto, necesitamos la función de cambio de activación de select2. Esto está funcionando perfectamente para mí. Espero que los usuarios lo entiendan.

Ashi

9

En la versión actual activada select2, v4.0.1 puede establecer el valor de esta manera:

var $example = $('.js-example-programmatic').select2();
$(".js-programmatic-set-val").on("click", function () { $example.val("CA").trigger("change"); });

// Option 2 if you can't trigger the change event.
var $exampleDestroy = $('.js-example-programmatic-destroy').select2();
$(".js-programmatic-set-val").on("click", function () { $exampleDestroy.val("CA").select2('destroy').select2(); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" />

using "trigger(change)"
<select class="js-example-programmatic">
  <optgroup label="Alaskan/Hawaiian Time Zone">
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
  </optgroup>
  <optgroup label="Pacific Time Zone">
    <option value="CA">California</option>
    <option value="NV">Nevada</option>
    <option value="OR">Oregon</option>
    <option value="WA">Washington</option>
  </optgroup>
  <optgroup label="Mountain Time Zone">
    <option value="AZ">Arizona</option>
    <option value="CO">Colorado</option>
    <option value="ID">Idaho</option>
    <option value="MT">Montana</option>
    <option value="NE">Nebraska</option>
    <option value="NM">New Mexico</option>
    <option value="ND">North Dakota</option>
    <option value="UT">Utah</option>
    <option value="WY">Wyoming</option>
  </optgroup>
  <optgroup label="Central Time Zone">
    <option value="AL">Alabama</option>
    <option value="AR">Arkansas</option>
    <option value="IL">Illinois</option>
    <option value="IA">Iowa</option>
    <option value="KS">Kansas</option>
    <option value="KY">Kentucky</option>
    <option value="LA">Louisiana</option>
    <option value="MN">Minnesota</option>
    <option value="MS">Mississippi</option>
    <option value="MO">Missouri</option>
    <option value="OK">Oklahoma</option>
    <option value="SD">South Dakota</option>
    <option value="TX">Texas</option>
    <option value="TN">Tennessee</option>
    <option value="WI">Wisconsin</option>
  </optgroup>
  <optgroup label="Eastern Time Zone">
    <option value="CT">Connecticut</option>
    <option value="DE">Delaware</option>
    <option value="FL">Florida</option>
    <option value="GA">Georgia</option>
    <option value="IN">Indiana</option>
    <option value="ME">Maine</option>
    <option value="MD">Maryland</option>
    <option value="MA">Massachusetts</option>
    <option value="MI">Michigan</option>
    <option value="NH">New Hampshire</option>
    <option value="NJ">New Jersey</option>
    <option value="NY">New York</option>
    <option value="NC">North Carolina</option>
    <option value="OH">Ohio</option>
    <option value="PA">Pennsylvania</option>
    <option value="RI">Rhode Island</option>
    <option value="SC">South Carolina</option>
    <option value="VT">Vermont</option>
    <option value="VA">Virginia</option>
    <option value="WV">West Virginia</option>
  </optgroup>
</select>

using destroy: 
<select class="js-example-programmatic">
  <optgroup label="Alaskan/Hawaiian Time Zone">
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
  </optgroup>
  <optgroup label="Pacific Time Zone">
    <option value="CA">California</option>
    <option value="NV">Nevada</option>
    <option value="OR">Oregon</option>
    <option value="WA">Washington</option>
  </optgroup>
  <optgroup label="Mountain Time Zone">
    <option value="AZ">Arizona</option>
    <option value="CO">Colorado</option>
    <option value="ID">Idaho</option>
    <option value="MT">Montana</option>
    <option value="NE">Nebraska</option>
    <option value="NM">New Mexico</option>
    <option value="ND">North Dakota</option>
    <option value="UT">Utah</option>
    <option value="WY">Wyoming</option>
  </optgroup>
  <optgroup label="Central Time Zone">
    <option value="AL">Alabama</option>
    <option value="AR">Arkansas</option>
    <option value="IL">Illinois</option>
    <option value="IA">Iowa</option>
    <option value="KS">Kansas</option>
    <option value="KY">Kentucky</option>
    <option value="LA">Louisiana</option>
    <option value="MN">Minnesota</option>
    <option value="MS">Mississippi</option>
    <option value="MO">Missouri</option>
    <option value="OK">Oklahoma</option>
    <option value="SD">South Dakota</option>
    <option value="TX">Texas</option>
    <option value="TN">Tennessee</option>
    <option value="WI">Wisconsin</option>
  </optgroup>
  <optgroup label="Eastern Time Zone">
    <option value="CT">Connecticut</option>
    <option value="DE">Delaware</option>
    <option value="FL">Florida</option>
    <option value="GA">Georgia</option>
    <option value="IN">Indiana</option>
    <option value="ME">Maine</option>
    <option value="MD">Maryland</option>
    <option value="MA">Massachusetts</option>
    <option value="MI">Michigan</option>
    <option value="NH">New Hampshire</option>
    <option value="NJ">New Jersey</option>
    <option value="NY">New York</option>
    <option value="NC">North Carolina</option>
    <option value="OH">Ohio</option>
    <option value="PA">Pennsylvania</option>
    <option value="RI">Rhode Island</option>
    <option value="SC">South Carolina</option>
    <option value="VT">Vermont</option>
    <option value="VA">Virginia</option>
    <option value="WV">West Virginia</option>
  </optgroup>
</select>

<button class="js-programmatic-set-val">set value</button>

Expandir fragmento

Mosh Feu
fuente

¿Cómo puedo establecer el valor sin activar el evento de cambio? El evento de cambio activa mis propios controladores de eventos que están diseñados para cuando el usuario cambia el valor manualmente.

enumag

La otra opción es destroyvolver a llamar al complemento. Ver el código actualizado ..

Mosh Feu

¿Hay alguna manera de obtener las opciones que originalmente pasé a select2 para no tener que duplicarlas? De todos modos, esta solución parece más un truco.

enumag

Seguro que es hach. La forma oficial de acuerdo con los documentos es activar el evento de cambio. so that I wouldn't have to duplicate them¿Por qué tengo que duplicarlos? Cuando lo haces, destroyel selectsigue ahí con todos los suyos options.

Mosh Feu

Me refiero a las opciones pasadas a select2:$example.select2({ ... this ... })

enumag

6

Para Ajax, use $(".select2").val("").trigger("change"). Eso debería resolver el problema.

Sab
fuente

6

Creo que necesitas la initSelectionfunción

$("#programid").select2({
  placeholder: "Select a Program",
  allowClear: true,
  minimumInputLength: 3,
  ajax: {
    url: "ajax.php",
    dataType: 'json',
    quietMillis: 200,
    data: function (term, page) {
      return {
        term: term, //search term
        flag: 'selectprogram',
        page: page // page number
      };
    },
    results: function (data) {
      return {results: data};
    }
  },
  initSelection: function (element, callback) {
    var id = $(element).val();
    if (id !== "") {
      $.ajax("ajax.php/get_where", {
        data: {programid: id},
        dataType: "json"
      }).done(function (data) {
        $.each(data, function (i, value) {
          callback({"text": value.text, "id": value.id});
        });
        ;
      });
    }
  },
  dropdownCssClass: "bigdrop",
  escapeMarkup: function (m) { return m; }
});

Ahmad Tarawneh
fuente

Esto está funcionando. Pero está en desuso a partir de la versión 4.0

VisualBean

5

HTML

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

JS

 $("#lang").select2().val('php').trigger('change.select2');

fuente: https://select2.github.io/options.html

NaveenDA
fuente

5

En Select2 V.4

utilizar $('selector').select2().val(value_to_select).trigger('change');

Creo que debería funcionar

Akash sharma
fuente

3

Establezca el valor y active el evento de cambio inmediatamente.

$('#selectteam').val([183,182]).trigger('change');

manoj patel
fuente

Gracias mismo mi día

Jaydeep purohit

3

    $("#select_location_id").val(value);
    $("#select_location_id").select2().trigger('change');

Resolví mi problema con este simple código. Donde #select_location_id es un ID del cuadro de selección y el valor es el valor de una opción enumerada en el cuadro de select2.

Numan Pathan
fuente

2

La respuesta de An Phan funcionó para mí:

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

Pero agregar el cambio desencadena el evento

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

Andrés Rodríguez
fuente

1

Recibo el error "Uncaught TypeError: $ (...). Select2 (...). Change is not a function (...)" cuando lo hago de esta manera. No creo que sea posible con la versión 4.x de Select2; aquí nada funciona con ajax.

MC9000

2

puedes usar este código:

$("#programid").val(["number:2", "number:3"]).trigger("change");

donde 2 en "número: 2" y 3 en "número: 3" son el campo de identificación en la matriz de objetos

HamidReza
fuente

1

A veces, se select2()cargará primero, y eso hace que el control no muestre correctamente el valor seleccionado previamente. Poner un retraso de algunos segundos puede resolver este problema.

setTimeout(function(){                  
    $('#costcentreid').select2();               
},3000);

Poornima
fuente

1

$('#inputID').val("100").select2();

Sería más apropiado aplicar select2después de elegir uno de los seleccionados actuales.

Mehmet Ali Ulusan
fuente

0

Hice algo como esto para preestablecer elementos en el menú desplegable select2 ajax

      //preset element values
        $(id).val(topics);
       //topics is an array of format [{"id":"","text":""}, .....]
          setTimeout(function(){
           ajaxTopicDropdown(id,
                2,location.origin+"/api for gettings topics/",
                "Pick a topic", true, 5);                      
            },1);
        // ajaxtopicDropdown is dry fucntion to get topics for diffrent element and url

Ajeet Lakhani
fuente

0

Deberías usar:

var autocompleteIds= $("#EventId");
autocompleteIds.empty().append('<option value="Id">Text</option>').val("Id").trigger('change');

// For set multi selected values
var data =  [];//Array Ids
var option =  [];//Array options of Ids above
autocompleteIds.empty().append(option).val(data).trigger('change');

// Callback handler that will be called on success
request.done(function (response, textStatus, jqXHR) {
    // append the new option
    $("#EventId").append('<option value="' + response.id + '">' + response.text + '</option>');

    // get a list of selected values if any - or create an empty array
    var selectedValues = $("#EventId").val();
    if (selectedValues == null) {
        selectedValues = new Array();
    }
    selectedValues.push(response.id);   // add the newly created option to the list of selected items
    $("#EventId").val(selectedValues).trigger('change');   // have select2 do it's thing
});

Xman clásico
fuente

0

Si está utilizando un cuadro de entrada, debe establecer la propiedad "múltiple" con su valor como "verdadero". Por ejemplo,

<script>
    $(document).ready(function () {

        var arr = [{ id: 100, text: 'Lorem Ipsum 1' },
            { id: 200, text: 'Lorem Ipsum 2'}];

        $('#inputID').select2({
            data: arr,
            width: 200,
            multiple: true
        });
    });
</script>

Arun Banik
fuente

0

En select2 < version4existe la opción initSelection()para la carga de datos a distancia, a través del cual es posible establecer el valor inicial para la entrada como en el modo de edición.

$("#e6").select2({
    placeholder: "Search for a repository",
    minimumInputLength: 1,
    ajax: { 
        // instead of writing the function to execute the request we use Select2's convenient helper
        url: "https://api.github.com/search/repositories",
        dataType: 'json',
        quietMillis: 250,
        data: function (term, page) {
            return {
                q: term, // search term
            };
        },
        results: function (data, page) {
            // parse the results into the format expected by Select2.
            // since we are using custom formatting functions we do not need to alter the remote JSON data
            return { results: data.items };
        },
        cache: true
    },
    initSelection: function(element, callback) {
        // the input tag has a value attribute preloaded that points to a preselected repository's id
        // this function resolves that id attribute to an object that select2 can render
        // using its formatResult renderer - that way the repository name is shown preselected
        var id = $(element).val();
        if (id !== "") {
            $.ajax("https://api.github.com/repositories/" + id, {
                dataType: "json"
            }).done(function(data) { callback(data); });
        }
    },
    formatResult: repoFormatResult, // omitted for brevity, see the source of this page
    formatSelection: repoFormatSelection,  // omitted for brevity, see the source of this page
    dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
    escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results
});

Documentación de origen: Select2 - 3.5.3

Sairam Suresh
fuente

0

Solo para agregar a cualquier otra persona que pueda haber tenido el mismo problema conmigo.

Estaba tratando de configurar la opción seleccionada de mis opciones cargadas dinámicamente (desde AJAX) y estaba tratando de configurar una de las opciones como seleccionada dependiendo de alguna lógica.

Mi problema surgió porque no estaba tratando de establecer la opción seleccionada en función de la ID que debe coincidir con el valor, ¡no el valor que coincide con el nombre!

Cañada
fuente

0

Para varios valores, algo como esto:

$("#HouseIds").select2("val", @Newtonsoft.Json.JsonConvert.SerializeObject(Model.HouseIds));

que se traducirá en algo como esto

$("#HouseIds").select2("val", [35293,49525]);

Robert Benyi
fuente

0

Esto puede ayudar a alguien a cargar datos de select2 desde AJAX mientras carga datos para editar ( aplicable para selección única o múltiple ):

Durante mi carga de formulario / modelo:

  $.ajax({
        type: "POST",
        ...        
        success: function (data) {
          selectCountries(fixedEncodeURI(data.countries));
         }

Llame para seleccionar datos para Select2:

var countrySelect = $('.select_country');
function selectCountries(countries)
    {
        if (countries) {
            $.ajax({
                type: 'GET',
                url: "/regions/getCountries/",
                data: $.param({ 'idsSelected': countries }, true),

            }).then(function (data) {
                // create the option and append to Select2                     
                $.each(data, function (index, value) {
                    var option = new Option(value.text, value.id, true, true);
                    countrySelect.append(option).trigger('change');
                    console.log(option);
                });
                // manually trigger the `select2:select` event
                countrySelect.trigger({
                    type: 'select2:select',
                    params: {
                        data: data
                    }
                });
            });
        }
    }

y si puede tener problemas con la codificación, puede cambiar según su requisito:

function fixedEncodeURI(str) {
        return encodeURI(str).replace(/%5B/g, '[').replace(/%5D/g, ']').replace(/%22/g,"");

    }

Kamran Ul Haq
fuente

0

si obtiene sus valores de ajax, antes de llamar

$("#select_location_id").val(value);
$("#select_location_id").select2().trigger('change');

Expandir fragmento

confirmar que la llamada ajax se ha completado, usando la función jquery cuando

$.when(ajax1(), ajax2(), ajax3(), ajax4()).done(function(a1, a2, a3, a4){
      // the code here will be executed when all four ajax requests resolve.
      // a1, a2, a3 and a4 are lists of length 3 containing the response text,
      // status, and jqXHR object for each of the four ajax calls respectively.
    });

Expandir fragmento

como se describe aquí [¿ Esperar hasta que se realicen todas las solicitudes de jQuery Ajax?

victor mwangi
fuente

0

Para construir sobre la respuesta de @ tomloprod. Por la extraña posibilidad de que esté usando x-editable , y tenga un campo select2 (v4) y tenga varios elementos que debe preseleccionar. Puede utilizar el siguiente código:

$("#select2field").on("shown", function(e, editable){
    $(["test1", "test2", "test3", "test4"]).each(function(k, v){
        // Create a DOM Option and pre-select by default~
        var newOption = new Option(v.text, v.id, true, true);
        // Append it to the select
        $(editable.input.$input).append(newOption).trigger('change');
     });
});

y aquí está en acción:

var data = [
{
    id: 0,
    text: 'enhancement'
},
{
    id: 1,
    text: 'bug'
},
{
    id: 2,
    text: 'duplicate'
},
{
    id: 3,
    text: 'invalid'
},
{
    id: 4,
    text: 'wontfix'
}
];

$("#select2field").editable({
        type: "select2",
        url: './',
        name: 'select2field',
        savenochange: true,
        send: 'always',
        mode: 'inline',
        source: data,
        value: "bug, wontfix",
        tpl: '<select style="width: 201px;">',
        select2: {
            width: '201px',
            tags: true,
            tokenSeparators: [',', ' '],
            multiple: true,
            data:data
        },
        success: function(response, newValue) {
            console.log("success")
        },
        error: function(response, newValue) {
            if (response.status === 500) {
                return 'Service unavailable. Please try later.';
            } else {
                return response.responseJSON;
            }
        }
    });

var preselect= [
    {
        id: 1,
        text: 'bug'
    },
    {
    id: 4,
    text: 'wontfix'
}
];

 $("#select2field").on("shown", function(e, editable){
    $(preselect).each(function(k, v){
        // Create a DOM Option and pre-select by default~
        var newOption = new Option(v.text, v.id, true, true);
        // Append it to the select
        $(editable.input.$input).append(newOption).trigger('change');
     });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" />

<link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>

<a id="select2field">bug, wontfix</a>

Expandir fragmento

Supongo que esto funcionaría incluso si no usa x-editable. Espero que htis pueda ayudar a alguien.

Renier
fuente

0

Puedes usar este código:

    $('#country').select2("val", "Your_value").trigger('change');

Pon tu valor deseado en lugar de Your_value

Espero que funcione :)

Espíritu de solución
fuente

-2

Bonito y fácil:

document.getElementById("select2-id_city-container").innerHTML = "Your Text Here";

Y cambia id_citya la identificación de su selección.

Editar: Después del comentario de Glen, me doy cuenta de que debería explicar por qué y cómo funcionó para mí:

Hice que select2trabajar fuera realmente agradable para mi forma. Lo único que no pude hacer funcionar fue mostrar el valor seleccionado actual al editar. Buscaba una API de terceros, guardaba registros nuevos y editaba registros antiguos. Después de un tiempo me di cuenta de que no necesitaba establecer el valor correctamente, solo la etiqueta dentro del campo, porque si el usuario no cambia el campo, no pasa nada. Después de buscar y ver a mucha gente que tiene problemas con él, decidí hacerlo con Javascript puro. Funcionó y publiqué para quizás ayudar a alguien. También sugiero configurar un temporizador para ello.

bonafernando
fuente

Esta respuesta es un truco horrible que ni siquiera establecería el valor correctamente.

Glen

Lamento eso. Editaré mi respuesta para explicar por qué la publiqué.

bonafernando

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

Respuestas:

SELECCIONAR2 <V4

Paso # 1: HTML

Paso # 2: Crea una instancia de Select2

Paso # 3: establezca su valor deseado

SELECT2 V4