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


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>

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

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.

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


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


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

0

Po prostu użyj tego

$('#multipleSelect').change(function() {
    var selectedValues = $(this).val();  
});
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.