Comment définir par programme la valeur sélectionnée dans jQuery Select2 ?

Comment définir la valeur sélectionnée de jQuery Select2 ?

jQuery Select2 est un plugin populaire qui améliore la convivialité des éléments sélectionnés. L'une de ses fonctionnalités utiles est la possibilité de définir par programme la valeur sélectionnée. Cela peut être particulièrement utile dans les scénarios où une valeur prédéfinie doit être affichée lors du chargement initial de la page ou lors de la modification de sélections précédemment enregistrées.

Select2 < V4

Étape 1 : Marquage HTML

Inclure un champ de saisie masqué pour contenir la valeur sélectionnée :

<code class="html"><input type="hidden" name="mySelect2" id="mySelect2"></h3>
<p><strong>Étape 2 : Créez une instance Select2</strong></p>
<p>Initialisez Select2 avec les options appropriées :</p>
<pre class="brush:php;toolbar:false"><code class="js">$("#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;
  }
});</code>

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

Utilisez le data() pour définir la valeur sélectionnée :

<code class="js">$("#mySelect2").select2('data', { id: "elementID", text: "Hello!"  });</code>

Select2 V4

À l'aide de HTML

Pour Select2 v4, vous pouvez directement ajouter un option sélectionnée à l'élément select :

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

Utilisation de jQuery

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

Définition directe de la valeur

<code class="js">$("#myMultipleSelect2").val(5).trigger('change');</code>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!