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.