jQuery select2 Wert des Select-Tags abrufen?

95

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.

Renish Khunt
quelle
Können Sie eine JSFiddle bereitstellen? Es wäre sehr nützlich.
Ionică Bizău
1
Frage ist nicht klar. genau was willst du
Hiral

Antworten:

147
$("#first").val(); // this will give you value of selected element. i.e. 1,2,3.
etwas
quelle
5
$ ("# first"). val (); // es gibt 1,2,3 OR $ ("# first") zurück. select2 ('val'); // es kehrt zuerst, zweitens, drei zurück
Renish Khunt
$ ("# first"). val (); gibt 1,2,3 zurück (je nachdem, was ausgewählt ist) und Sie können den Code in der Funktion select2 () für weitere Details veröffentlichen.
Irgendwann
Verwenden Sie für eine Auswahl, die nach dem ID-Namen anstelle des Klassennamens aufgerufen wird, Folgendes: $ (". first"). val ()
Rui Martins
@ RuiMartins falsch. IDs werden mit "#" und Klassen mit "." Aufgerufen. Um nach ID aufzurufen, verwenden Sie $ ("# first"). Val () und für CLASS $ (". First"). ) .val ()
Source Matters
58

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?

Krish R.
quelle
1
$ ("# first"). val (); // es gibt 1,2,3 OR $ ("# first") zurück. select2 ('val'); // es kehrt zuerst, zweitens, drei zurück
Renish Khunt
Ich bin mir nicht sicher, ich habe deine Frage verstanden.
Krish R
1
Wenn ich das select2-Plugin verwendet habe, erhalte ich den Wert mit $ ("# first"). val (). Es wird nichts zurückgegeben, was leer ist.
Renish Khunt
Können Sie Fiddle Exmaple mit Ihrem Plugin bereitstellen?
Krish R
1
Ich musste $('#first :selected').text();die andere Option verwenden, um alle möglichen Optionen zurückzugeben.
Jeff Bluemel
35

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

Wawa
quelle
1
Sehr nützlich, wenn Sie zusätzliche Eigenschaften für die select2-Objekte haben
Schuh
9

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

Johny Pie
quelle
Hallo, darf ich wissen, woher currentTargetkommt? Keines Ihrer ID / Name-Beispiele bezieht sich auf die Frage. Ich kann mich also nirgendwo beziehen.
Mastersuse
8

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();
});
Steven Johnston
quelle
4

Einfache Antwort lautet:

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

und so können Sie auch schreiben:

 $('#first').val()
Rajiv Sharma
quelle
3

Versuche dies :

$('#input_id :selected').val(); //for getting value from selected option
$('#input_id :selected').text(); //for getting text from selected option
Fahmi Imanudin
quelle
@RenishKhunt Die Antworten hier sind nicht nur für Sie (Person, die die Frage stellt), sondern auch für andere Personen, die diese Seite sehen. Und je mehr verschiedene Lösungen hier eingereicht werden, desto besser ist die Wahl für alle anderen: nicht nur für Sie :)
infografnet
Ja, es tut mir leid. Vielen Dank, @infografnet und vielen Dank Fahmi Imanudin für die Veröffentlichung einer Antwort :)
Renish Khunt
2

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.

KeyNone
quelle
$ ("# first"). val (); // es gibt 1,2,3 OR $ ("# first") zurück. select2 ('val'); // es kehrt zuerst, zweitens, drei zurück
Renish Khunt
Scheint, als hätte ich Ihre Frage falsch gestellt, dann klären Sie bitte genau, was Sie erreichen möchten.
KeyNone
Wenn ich das select2-Plugin verwendet habe, erhalte ich den Wert mit $ ("# first"). val (). Es wird nichts zurückgegeben, was leer ist.
Renish Khunt
Sehen Sie diese Geige . Funktioniert perfekt für mich. (Ich habe select2.js unter den externen Ressourcen hinzugefügt, obwohl ich nicht sagen kann, warum die Boxen hässlich aussehen).
KeyNone
Der Schlüssel war, dass Sie sagten, wir wollen den Wert von Options-Tags erhalten!
Darius.V
0

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/

Bartosz war
quelle
0

Lösung:

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