Pour configurer dynamiquement la valeur "sélectionnée" d'un composant Select2:

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

Whereins le second paramètre est un objet avec les valeurs attendues.

SELECT2 <V4

Étape n ° 1: HTML

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

Étape n ° 2: créez une instance 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; } }); 

Étape n ° 3: définissez la valeur souhaitée

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

Si vous utilisez select2 sans AJAX, vous pouvez effectuer les opérations suivantes:

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

Vous pouvez également le faire:

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

SELECT2 V4

Pour select2 v4, vous pouvez ajouter directement une option / s comme suit:

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

Ou avec JQuery:

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

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

De même que j'ai essayé, lorsque j'utilise ajax dans select2, les méthodes de contrôle programmatique pour définir de nouvelles valeurs dans select2 ne fonctionnent pas pour moi! Maintenant, j'écris ces codes pour résoudre le problème:

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

Vous pouvez tester le code d'exemple complet ici lien: https://jsfiddle.net/NabiKAZ/2g1qq26v/1/
Dans cet exemple de code, il existe un ajax select2 et vous pouvez définir une nouvelle valeur avec un bouton.

 $("#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://select2.github.io/css/bootstrap.css"> <script type="text/javascript" src="https://select2.github.io/vendor/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://select2.github.io/css/s2-docs.css"> <select id="sel" multiple="multiple" class="col-xs-5"> </select> <button id="btn">Set Default</button> 

Dans la version actuelle sur select2 – v4.0.1 vous pouvez définir la valeur comme ceci:

 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> 

Je pense que vous avez besoin de la fonction 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; } }); 

 var $option = $("<option selected></option>").val('1').text("Pick me"); $('#select_id').append($option).trigger('change'); 

Essayez cette option puis sélectionnez. Ne double pas l'option sur l'appel AJAX.

Pour Ajax, utilisez $(".select2").val("").trigger("change") . Cela devrait résoudre le problème.

J'ai fait quelque chose comme ceci pour présélectionner les éléments dans select2 ajax dropdown

  //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 

Tu devrais utiliser:

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

Une réponse de Phan m'a fonctionné:

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

Mais l'ajout de la modification déclenche l'événement

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

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

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

Si vous utilisez une zone de saisie, vous devez définir la propriété "multiple" avec sa valeur comme "vraie". Par exemple,

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

Dans select2 < version4 il existe l'option initSelection() pour le chargement de données à distance, par lequel il est possible de définir la valeur initiale pour l'entrée comme en mode édition.

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

Documentation source: Select2 – 3.5.3