Heim > Backend-Entwicklung > PHP-Tutorial > Wie kann ich den ausgewählten Wert in jQuery Select2 programmgesteuert festlegen?

Wie kann ich den ausgewählten Wert in jQuery Select2 programmgesteuert festlegen?

Susan Sarandon
Freigeben: 2024-10-30 16:58:02
Original
289 Leute haben es durchsucht

How to Programmatically Set the Selected Value in jQuery Select2?

Wie lege ich den ausgewählten Wert von jQuery Select2 fest?

jQuery Select2 ist ein beliebtes Plugin, das die Benutzerfreundlichkeit ausgewählter Elemente verbessert. Eine seiner nützlichen Funktionen ist die Möglichkeit, den ausgewählten Wert programmgesteuert festzulegen. Dies kann insbesondere in Szenarien hilfreich sein, in denen beim ersten Laden der Seite oder beim Bearbeiten zuvor gespeicherter Auswahlen ein vordefinierter Wert angezeigt werden muss.

Select2 < V4

Schritt 1: HTML-Markup

Fügen Sie ein verstecktes Eingabefeld ein, um den ausgewählten Wert zu speichern:

<code class="html"><input type="hidden" name="mySelect2" id="mySelect2"></h3>
<p><strong>Schritt 2: Erstellen Sie eine Select2-Instanz</strong></p>
<p>Initialisieren Sie Select2 mit den entsprechenden Optionen:</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>
Nach dem Login kopieren

Schritt 3: Legen Sie den gewünschten Wert fest

Verwenden Sie die data()-Methode zum Festlegen des ausgewählten Werts:

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

Select2 V4

Mit HTML

Für Select2 v4 können Sie einen direkt anhängen ausgewählte Option zum ausgewählten Element:

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

Mit jQuery

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

Wert direkt festlegen

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

Das obige ist der detaillierte Inhalt vonWie kann ich den ausgewählten Wert in jQuery Select2 programmgesteuert festlegen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage