javascript - asignar - select2 trigger change

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

Question

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

Tengo un código simple de select2 que obtiene 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 en él 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 el camino.

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.

Answer 1

SELECT2 <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: establece tu 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 puedes hacerlo:

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

SELECT2 V4

Para select2 v4 puede agregar directamente una o más 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></option>").val("TheID").text("The text")

$("#myMultipleSelect2").append($newOption).trigger(''change'');

otro ejemplo

$("select123455").val(5).trigger(''change'');

Answer 2

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

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

Answer 3

Además, como lo intenté, cuando uso ajax en select2, ¡los métodos de control programáticos para establecer nuevos valores en select2 no me funcionan! Ahora escribo estos códigos 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 aquí: https://jsfiddle.net/NabiKAZ/2g1qq26v/32/
En este código de ejemplo hay un ajax select2 y puede establecer un nuevo valor con un botón.

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

Answer 4

Bonito y fácil:

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

Y cambias id_city a la id_city de tu 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 select2 funcionara muy bien para mi forma. Lo único que no pude hacer fue mostrar el valor seleccionado actual al editar. Estaba buscando una API de terceros, guardando nuevos y editando registros viejos. Después de un tiempo me di cuenta de que no necesitaba establecer el valor correctamente, solo el campo dentro de la etiqueta, porque si el usuario no cambia el campo, no pasa nada. Después de buscar y mirar a mucha gente que tiene problemas con él, decidí hacerlo con Javascript puro. Funcionó y publiqué para tal vez ayudar a alguien. También sugiero configurar un temporizador para ello.

Answer 5

Creo que necesitas la función initSelection

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

Answer 6

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

Answer 7

En select2 < version4 existe la opción initSelection() para la carga remota de datos, a través de la cual es posible establecer el valor inicial de 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

Answer 8

En Select2 V.4

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

Creo que debería funcionar

Answer 9

En la versión actual en 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>

Answer 10

Hice algo así para predefinir 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

Answer 11

La respuesta de un Phan funcionó para mí:

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

Pero agregar el cambio activa el evento

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

Answer 12

Me gustó esto-

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

Answer 13

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

Answer 14

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.

Answer 15

Puedes usar este código:

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

Pon tu valor deseado en lugar de Pakistán

Espero que funcione :)

Answer 16

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>

Answer 17

Solo para agregar a cualquier 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) e intentaba establecer una de las opciones como seleccionada dependiendo de alguna lógica.

Mi problema vino 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!

Answer 18

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 campo de identificación en matriz de objetos

Answer 19

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

Answer 20

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

Answer 21

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

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

Pruebe esto anexar y luego seleccione. No duplica la opción en la llamada AJAX.