jQuery select2 Wert des Select-Tags abrufen?

Hallo Freunde, das ist mein Code:

<select id='first'>
  <option value='1'> First  </option>
  <option value='2'> Second </option>
  <option value='3'> Three  </option>
</select>

Dies ist mein select2-Code:

$("#first").select2();

Unten finden Sie den Code zum Abrufen des ausgewählten Werts.

$("#first").select2('val'); // It returns first,second,three.

Dies ist eine Rückgabe eines Textes wie first,second,threeund ich möchte bekommen 1,2,3.
Bedeutet, ich brauche den Wert des Auswahlfeldes, nicht den Text.

$("#first").val(); // this will give you value of selected element. i.e. 1,2,3.

Um das Select-Element zu erhalten, können Sie es verwenden $('#first').val();

So erhalten Sie den Text des ausgewählten Werts - $('#first :selected').text();

Können Sie bitte Ihren select2()Funktionscode posten?

$("#first").select2('data') gibt alle Daten als Karte zurück

Wenn Sie Ajax verwenden , möchten Sie möglicherweise direkt nach der Auswahl den aktualisierten Wert von select erhalten.

//Part 1

$(".element").select2(/*Your code*/)    

//Part 2 - continued 

$(".element").on("select2:select", function (e) { 
  var select_val = $(e.currentTarget).val();
  console.log(select_val)
});

Credits: Steven-Johnston

Mit dieser Lösung können Sie das ausgewählte Element vergessen. Hilfreich, wenn Sie für ausgewählte Elemente keine ID haben.

$("#first").select2()
.on("select2:select", function (e) {
    var selected_element = $(e.currentTarget);
    var select_val = selected_element.val();
});

Einfache Antwort lautet:

$('#first').select2().val()

und so können Sie auch schreiben:

 $('#first').val()

Versuche dies :

$('#input_id :selected').val(); //for getting value from selected option
$('#input_id :selected').text(); //for getting text from selected option

Sehen Sie diese Geige .
Grundsätzlich möchten Sie das values Ihrer option-tags erhalten, aber Sie versuchen immer, den Wert Ihres select-node mit zu erhalten $("#first").val().

Also müssen wir die Option-Tags auswählen und wir werden jQuerys-Selektoren verwenden:

$("#first option").each(function() {
    console.log($(this).val());
});

$("#first option")wählt jedes optionElement des Elements mit der ID aus first.

Die oben genannten Lösungen haben bei mir mit der neuesten select2 (4.0.13) nicht funktioniert.

Mit jQuery können Sie diese Lösung verwenden, um Werte gemäß der Dokumentation abzurufen: https://select2.org/programmatic-control/retrieving-selections

$('#first').find(':selected').val();

Andere Antworten haben bei mir nicht funktioniert, deshalb habe ich eine Lösung entwickelt:

Ich habe eine Option mit class = "option-item" erstellt, um das Targeting zu vereinfachen

HTML:

<select id="select-test">
<option value="5-val" id="first-id" class="option-item"> First option </option>
</select>

Dann habe ich für jede ausgewählte Option die Eigenschaft none hinzugefügt

CSS:

option:checked {
   display: none;
}

Jetzt können wir Änderungen an unserer SelectBox hinzufügen, um unsere ausgewählte Option mit der Eigenschaft display none durch das Attribut simple : hidden zu finden

JQuery:

$('#select-test').change(function(){
//value 
    $('#select-test').find('.option-item:hidden').val();
//id
    $('#select-test').find('.option-item:hidden').attr('id');
//text
    $('#select-test').find('.option-item:hidden').text();
});

Arbeitsgeige: https://jsfiddle.net/Friiz/2dk4003j/10/

Lösung:

var my_veriable = $('#your_select2_id').select2().val();
var my_last_veriable = my_veriable.toString();