Wie erhalte ich mit jQuery mehrere Auswahlfeldwerte?

152

Wie erhalte ich mit jQuery mehrere Auswahlfeldwerte?

ENTWICKELT
quelle

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>
Darin Dimitrov
quelle
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...
kpull1
quelle
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.
Joz Naveen Joz
quelle
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

Hardika
quelle
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

Prabhagaran
quelle
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);
Santhosh Rajkumar
quelle
0

Verwenden Sie einfach diese

$('#multipleSelect').change(function() {
    var selectedValues = $(this).val();  
});
Kartik Chauhan
quelle