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.