Heim  >  Artikel  >  Backend-Entwicklung  >  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
Susan SarandonOriginal
2024-10-30 16:58:02129Durchsuche

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>

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>

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>

Mit jQuery

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

Wert direkt festlegen

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

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!

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