Come ottenere più valori della casella di selezione utilizzando jQuery?


155

Come ottenere più valori della casella di selezione utilizzando jQuery?

Risposte:



291

L'uso della .val()funzione in un elenco a selezione multipla restituirà una matrice dei valori selezionati:

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

e nel tuo 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
cosa succede se si desidera ottenere Text 1invece di valore? sostituire .val()con .text()?
Raza Ahmed,

9
Vale la pena notare che una selezione multipla senza nulla selezionato restituisce nullpiuttosto che un array vuoto. Ciò significa che se stai aggiungendo programmaticamente un valore selezionato, devi fare un po 'di giocoleria per farlo bene.
Leone,

Grazie! Ci sono così tanti modi per ottenere un valore da un elemento con jQuery che è inevitabilmente una lotta per trovare il modo che stai cercando.
Charles Wood,

5
@Leo puoi aggiungere una coalescenza per aggirare il problema null, ad esempio var selectedValues = $('#multipleSelect').val() || []; vale la pena notare che restituisce una matrice di stringhe. Stavo confrontando con un numero intero e non ottenevo corrispondenze, quindi ho aggiunto a .toString().
Tkerwood,

16

Puoi anche usare la funzione js map:

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

E quindi puoi ottenere qualsiasi proprietà optiondell'elemento:

return $(el).text();
return $(el).data("mydata");
return $(el).prop("disabled");
etc...

2
ottima risposta, ma non è necessario pagare le spese extra del wrapping elcome oggetto jQuery per ogni singola opzione. Vai subito fuori dal DOM quando non è troppo strano. Potresti passare $(el).val()a solo el.value. Naturalmente se sei abituato a jQuery o vuoi acquisire dati o attributi come gli altri tuoi esempi, jQuery non fa male a nessuno.
KyleMit,

1
@KyleMit Ottimo consiglio. Ho appena usato questo approccio per afferrare una raccolta di valori di campi nascosti e ha funzionato perfettamente.
EvilDr

12
var selected=[];
 $('#multipleSelect :selected').each(function(){
     selected[$(this).val()]=$(this).text();
    });
console.log(selected);

Ancora un altro approccio a questo problema. L'array selezionato avrà gli indici come valori dell'opzione e ogni elemento dell'array avrà il testo come valore.

per esempio

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

se si dice che le opzioni 1 e 2 sono selezionate.

l'array selezionato sarà:

selected['abc']=1; 
selected['def']=2.

5

Solo di una riga

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

Output: ["text1", "text2"]

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

Output: ["valore1", "valore2"]

Se usi .join ()

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

Output: testo1, testo2, testo3


4

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

Codice JQuery:

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

});

Spero funzioni


14
Non "sperare che funzioni", se non sei sicuro che sia la risposta, prova e assicurati!
Sterling Archer,

6
Se non sei sicuro della risposta, non pubblicarla .. !! non siamo qui per speranze .. !! LOL
Clain Dsilva,

3
Hey amico. Funziona perfettamente. Controlla. Dovresti sperarlo. Non dare commenti irrilevanti ..
Prabhagaran,

2
Questo è un uso inefficiente di jQuery. L'approccio migliore è $('#multiple').find(':selected')prefigurare un selettore ID come questo: @Prabhagaran
cannot_mutably_borrow

@YounisShah Difficilmente direi che è "inefficiente" poiché la differenza di tempo è nulla di relatività ...
NorCalKnockOut

0

Ottieni valori selezionati nel separatore virgola

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

Usa questo

$('#multipleSelect').change(function() {
    var selectedValues = $(this).val();  
});
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.