Comment définir par programme la valeur sélectionnée dans jQuery Select2 ?-tutoriel php-php.cn

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

Susan Sarandon

Libérer： 2024-10-30 16:58:02

original

227 Les gens l'ont consulté

How to Programmatically Set the Selected Value in 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>

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

Utilisation de jQuery

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

Copier après la connexion

Définition directe de la valeur

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

Copier après la connexion

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!