Wie erhalte ich mit jQuery mehrere Auswahlfeldwerte?


Antworten:



290

Wenn Sie die .val()Funktion in einer Mehrfachauswahlliste verwenden, wird ein Array der ausgewählten Werte zurückgegeben:

var selectedValues = $('#multipleSelect').val();

und in Ihrem HTML:

<select id="multipleSelect" multiple="multiple">
    <option value="1">Text 1</option>
    <option value="2">Text 2</option>
    <option value="3">Text 3</option>
</select>

11
Was ist, wenn Sie Text 1anstelle von Wert erhalten möchten ? ersetzen .val()durch .text()?
Raza Ahmed

9
Es ist erwähnenswert, dass eine Mehrfachauswahl mit nichts ausgewähltem nullanstelle eines leeren Arrays zurückgegeben wird. Das heißt, wenn Sie einen ausgewählten Wert programmgesteuert hinzufügen , müssen Sie ein wenig jonglieren, um ihn richtig zu machen.
Leo

Danke dir! Es gibt so viele Möglichkeiten, mit jQuery einen Wert aus einem Element zu ziehen, dass es unweigerlich schwierig ist, den gewünschten Weg zu finden.
Charles Wood

5
@Leo Sie können ein Coalesc hinzufügen, um das Null-Problem zu umgehen, z. B. Es ist var selectedValues = $('#multipleSelect').val() || []; auch erwähnenswert, dass es ein Array von Zeichenfolgen zurückgibt. Ich habe mit einer Ganzzahl verglichen und keine Übereinstimmungen erhalten, also habe ich eine hinzugefügt .toString().
Tkerwood

16

Sie können auch die js-Kartenfunktion verwenden:

$("#multipleSelect :selected").map(function(i, el) {
    return $(el).val();
}).get();

Und dann können Sie jede Eigenschaft des optionElements erhalten:

return $(el).text();
return $(el).data("mydata");
return $(el).prop("disabled");
etc...

2
Gute Antwort, aber Sie müssen nicht die zusätzlichen Kosten für das Umschließen elals jQuery-Objekt für jede einzelne Option bezahlen . Gehen Sie einfach direkt aus dem DOM, wenn es nicht zu komisch ist. Sie könnten $(el).val()einfach ändern el.value. Wenn Sie an jQuery gewöhnt sind oder Daten oder Attribute wie Ihre anderen Beispiele abrufen möchten, verletzt jQuery natürlich niemanden.
KyleMit

1
@ KyleMit Toller Tipp. Ich habe gerade diesen Ansatz verwendet, um eine Sammlung versteckter Feldwerte zu erfassen, und es hat perfekt funktioniert.
EvilDr

11
var selected=[];
 $('#multipleSelect :selected').each(function(){
     selected[$(this).val()]=$(this).text();
    });
console.log(selected);

Noch eine Annäherung an dieses Problem. Das ausgewählte Array hat die Indizes als Optionswerte und jedes Array-Element hat den Text als Wert.

beispielsweise

<select id="multipleSelect" multiple="multiple">
    <option value="abc">Text 1</option>
    <option value="def">Text 2</option>
    <option value="ghi">Text 3</option>
</select>

Wenn Sie sagen, sind Option 1 und 2 ausgewählt.

Das ausgewählte Array lautet:

selected['abc']=1; 
selected['def']=2.

5

Nur um eine Zeile-

var select_button_text = $('#SelectQButton option:selected')
                .toArray().map(item => item.text);

Ausgabe: ["text1", "text2"]

var select_button_text = $('#SelectQButton option:selected')
                .toArray().map(item => item.value);

Ausgabe: ["Wert1", "Wert2"]

Wenn Sie .join () verwenden

var select_button_text = $('#SelectQButton option:selected')
                .toArray().map(item => item.text).join();

Ausgabe: Text1, Text2, Text3


4

HTML Quelltext:

 <select id="multiple" multiple="multiple" name="multiple">
  <option value=""> -- Select -- </option>
  <option value="1">Opt1</option>
  <option value="2">Opt2</option>
  <option value="3">Opt3</option>
  <option value="4">Opt4</option>
  <option value="5">Opt5</option>
 </select>   

JQuery-Code:

$('#multiple :selected').each(function(i, sel){ 
    alert( $(sel).val() ); 

});

Hoffe, es funktioniert


13
"Hoffe nicht, dass es funktioniert", wenn Sie nicht sicher sind, ob es die Antwort ist, testen Sie es und seien Sie sicher!
Sterling Archer

6
Wenn Sie sich der Antwort nicht sicher sind, posten Sie sie nicht .. !! Wir sind nicht aus Hoffnungen hier .. !! LOL
Clain Dsilva

3
Hey Mann. Es funktioniert perfekt. Hör zu. Du solltest es hoffen. Geben Sie keinen irrelevanten Kommentar.
Prabhagaran

2
Dies ist eine ineffiziente Verwendung von jQuery. Besser ist es, mit einem ID-Selektor wie dem folgenden $('#multiple').find(':selected')vorzugehen : @Prabhagaran
nicht_veränderlich_ am

@ YounisShah Ich würde kaum sagen, dass es "ineffizient" ist, da der Zeitunterschied Relativität nichts ist ...
NorCalKnockOut

0

Erhalten Sie ausgewählte Werte im Komma-Trennzeichen

var Accessids = "";
$(".multi_select .btn-group>ul>li input:checked").each(function(i,obj)
{
    Accessids=Accessids+$(obj).val()+",";
});
Accessids = Accessids.substring(0,Accessids.length - 1);
console.log(Accessids);

0

Verwenden Sie einfach diese

$('#multipleSelect').change(function() {
    var selectedValues = $(this).val();  
});
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.