web-dev-qa-db-fra.com

Comment définir la valeur sélectionnée de jquery select2?

Cela appartient aux codes antérieurs à select2 version 4

J'ai un simple code de select2 qui récupère les données d'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; }
});

Ce code fonctionne, cependant, je dois lui attribuer une valeur comme en mode édition. Lorsque l'utilisateur sélectionne une valeur pour la première fois, elle est enregistrée et lorsqu'il doit modifier cette valeur, celle-ci doit apparaître dans le même menu de sélection (select2) pour sélectionner la valeur précédemment sélectionnée, mais je ne trouve aucun moyen. 

METTRE À JOUR:

Le code HTML:

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

Sélectionnez 2 accès par programme ne fonctionne pas avec cela.

javascriptphpjqueryajaxjquery-select2
66
ClearBoth

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

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

Où le deuxième paramètre est un objet avec les valeurs attendues.

METTRE À JOUR:

Cela fonctionne, je voulais juste noter que dans le nouveau select2, "a_key" est "text" dans un objet select2 standard. alors: {id: 100, text: 'Lorem Ipsum'} 

Exemple:  

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

Merci à @NoobishPro

42
An Phan

SELECT2 <V4

Étape 1: HTML

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

Étape 2: Créer 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 procéder comme suit:

<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 aussi 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 selected='selected'></option>").val("TheID").text("The text")

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

autre exemple

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

Aussi, comme j'ai essayé, lorsque ajax est utilisé dans select2, les méthodes programmatic control pour définir de nouvelles valeurs dans select2 ne fonctionnent pas pour moi!

$('#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 un exemple de code complet dans le lien suivant: https://jsfiddle.net/NabiKAZ/2g1qq26v/32/
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://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>

13
Nabi K.A.Z.

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

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

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

Essayez cette annexe puis sélectionnez. Ne duplique pas l'option sur l'appel de AJAX.

8
Jigo Palillo

Dans la version actuelle sur select2 - v4.0.1 , vous pouvez définir la valeur comme suit:

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>

6
Mosh Feu

J'ai fait comme ça

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

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; }
});
4
Ahmad Tarawneh

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

4
Sab

Dans Select2 V.4

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

Je pense que ça devrait marcher

3
Akash sharma

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

3
NaveenDA

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
});
0
Xman Classical

Dans select2 < version4, l'option initSelection() pour le chargement de données à distance permet de définir la valeur initiale de l'entrée 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

0
Sairam Suresh

Parfois, select2() sera chargé en premier, ce qui empêche le contrôle d'afficher correctement la valeur précédemment sélectionnée. Un délai de quelques secondes peut résoudre ce problème.

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

Définissez la valeur et déclenchez immédiatement l'événement change.

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

Nice et facile:

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

Et vous remplacez id_city par l'identifiant de votre choix.

Edit: Après le commentaire de Glen, je réalise que je devrais expliquer pourquoi et comment cela a fonctionné pour moi:

J'ai fait travailler select2 vraiment bien pour mon formulaire. La seule chose que je ne pouvais pas faire fonctionner était d’afficher la valeur actuellement sélectionnée lors de l’édition. Il recherchait une API tierce, sauvegardait de nouveaux enregistrements et en modifiait d'anciens. Après un moment, j'ai réalisé que je n'avais pas besoin de définir correctement la valeur, uniquement l'étiquette à l'intérieur du champ, car si l'utilisateur ne modifie pas le champ, rien ne se produit. Après avoir cherché et consulté beaucoup de personnes ayant des problèmes avec cela, j'ai décidé de le faire avec du Javascript pur. Cela a fonctionné et j'ai posté d'aider peut-être quelqu'un. Je suggère également de définir une minuterie pour cela.

0
bonafernando

J'ai fait quelque chose comme ça pour prérégler des éléments dans le menu déroulant 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
0
Ajeet Lakhani

J'ajouterai à ceux qui ont peut-être soulevé le même problème avec moi.

J'essayais de définir l'option sélectionnée de mes options chargées dynamiquement (à partir d'AJAX) et essayais de définir l'une des options comme étant sélectionnée en fonction d'une certaine logique.

Mon problème est venu parce que je n'essayais pas de définir l'option sélectionnée en fonction de l'ID qui doit correspondre à la valeur, pas à la valeur correspondant au nom!

0
Glen

vous pouvez utiliser ce code:

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

où 2 dans "number: 2" et 3 dans "number: 3" sont des champs id dans le tableau d'objets

0
HamidReza

La réponse d'An Phan a fonctionné pour moi:

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

Mais l'ajout du changement déclenche l'événement

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

Si vous utilisez une zone de saisie, vous devez définir la propriété "multiple" avec sa valeur sur "true". 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>
0
Arun Banik

Pour des valeurs multiples, quelque chose comme ceci:

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

qui se traduira par quelque chose comme ça

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