Jak uzyskać wiele wartości pól wyboru za pomocą jQuery?

155

Jak uzyskać wiele wartości pól wyboru za pomocą jQuery?

DEVOPS
źródło

Odpowiedzi:

291

Użycie .val()funkcji na liście wielokrotnego wyboru zwróci tablicę wybranych wartości:

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

aw Twoim 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
źródło
11
co jeśli chcesz dostać Text 1zamiast wartości? wymienić .val()z .text()?
Raza Ahmed
9
Warto zauważyć, że wielokrotne zaznaczenie bez zaznaczenia nic zwraca nullzamiast pustej tablicy. Oznacza to, że jeśli programowo dodajesz wybraną wartość, musisz trochę żonglować, aby zrobić to dobrze.
Leo
Dziękuję Ci! Jest tak wiele sposobów na uzyskanie wartości z elementu za pomocą jQuery, że znalezienie sposobu, którego szukasz, jest nieuchronnie trudne.
Charles Wood
5
@Leo możesz dodać coalesc, aby ominąć problem zerowy, np. var selectedValues = $('#multipleSelect').val() || []; Warto również zauważyć, że zwraca tablicę ciągów. Porównywałem do liczby całkowitej i nie otrzymałem żadnych dopasowań, więc dodałem .toString().
tkerwood
16

Możesz także użyć funkcji js map:

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

A następnie możesz uzyskać dowolną właściwość optionelementu:

return $(el).text();
return $(el).data("mydata");
return $(el).prop("disabled");
etc...
kpull1
źródło
2
świetna odpowiedź, ale nie ma potrzeby płacenia dodatkowych kosztów pakowania eljako obiektu jQuery dla każdej opcji. Po prostu wyjdź od razu z DOM, jeśli nie jest to zbyt dziwne. Możesz zmienić się $(el).val()na po prostu el.value. Oczywiście, jeśli jesteś przyzwyczajony do jQuery lub chcesz pobrać dane lub atrybuty, tak jak w innych przykładach, jQuery nikomu nie szkodzi.
KyleMit
1
@KyleMit Świetna wskazówka. Po prostu zastosowałem to podejście, aby pobrać kolekcję wartości ukrytych pól i zadziałało idealnie.
EvilDr
12
var selected=[];
 $('#multipleSelect :selected').each(function(){
     selected[$(this).val()]=$(this).text();
    });
console.log(selected);

Jeszcze inne podejście do tego problemu. Wybrana tablica będzie miała indeksy jako wartości opcji, a każdy element tablicy będzie miał tekst jako wartość.

na przykład

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

jeśli powiedzmy, że wybrano opcję 1 i 2.

wybrana tablica będzie:

selected['abc']=1; 
selected['def']=2.
Joz Naveen Joz
źródło
5

Tylko o jedną linię

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

Wynik: ["tekst1", "tekst2"]

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

Wynik: ["wartość1", "wartość2"]

Jeśli używasz .join ()

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

Wyjście: tekst1, tekst2, tekst3

hardika
źródło
4

Kod HTML:

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

Kod JQuery:

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

});

Mam nadzieję, że to działa

Prabhagaran
źródło
14
Nie „miej nadzieję, że zadziała”, jeśli nie jesteś pewien, czy to odpowiedź, przetestuj ją i bądź pewien!
Sterling Archer
6
Jeśli nie jesteś pewien odpowiedzi, nie wysyłaj jej .. !! nie jesteśmy tu dla nadziei .. !! LOL
Clain Dsilva
3
Cześć, stary. Działa doskonale. Sprawdź to. Powinieneś mieć taką nadzieję. Nie dawaj nieistotnych komentarzy ...
Prabhagaran,
2
Jest to nieefektywne użycie jQuery. Lepszym podejściem jest wprowadzenie przedmowy z selektorem identyfikatora w ten sposób: $('#multiple').find(':selected')@Prabhagaran
cannot_mutably_borrow
@YounisShah Nie powiedziałbym, że jest to „nieefektywne”, ponieważ różnica czasu nie jest niczym ...
NorCalKnockOut,
0

Pobierz wybrane wartości z separatorem przecinkiem

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
źródło
0

Po prostu użyj tego

$('#multipleSelect').change(function() {
    var selectedValues = $(this).val();  
});
Kartik Chauhan
źródło