Como obter vários valores de caixa de seleção usando o jQuery?

155

Como obter vários valores de caixa de seleção usando o jQuery?

DEVOPS
fonte

Respostas:

291

O uso da .val()função em uma lista de seleção múltipla retornará uma matriz dos valores selecionados:

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

e no seu 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
fonte
11
e se você quiser obter em Text 1vez de valor? substituir .val()com .text()?
Raza Ahmed
9
Vale ressaltar que uma seleção múltipla com nada selecionado retorna em nullvez de uma matriz vazia. Isso significa que, se você estiver programaticamente adicionando um valor selecionado, terá que fazer alguns malabarismos para acertar.
Leo
Obrigado! Existem tantas maneiras de obter um valor de um elemento com o jQuery que é inevitavelmente difícil encontrar o caminho que você está procurando.
Charles Wood
5
@ Leo, você pode adicionar um coalesc para contornar a questão nula, por exemplo, var selectedValues = $('#multipleSelect').val() || []; também vale a pena notar que ele retorna uma série de strings. Eu estava comparando com um número inteiro e não obtendo correspondências, então eu adicionei um .toString().
Tkerwood
16

Você também pode usar a função js map:

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

E então você pode obter qualquer propriedade do optionelemento:

return $(el).text();
return $(el).data("mydata");
return $(el).prop("disabled");
etc...
kpull1
fonte
2
ótima resposta, mas não há necessidade de pagar a despesa extra de embalagem elcomo um objeto jQuery para cada opção. Apenas saia do DOM quando não for muito estranho. Você pode mudar $(el).val()para apenas el.value. Obviamente, se você está acostumado ao jQuery ou deseja pegar dados ou atributos como seus outros exemplos, o jQuery não está prejudicando ninguém.
precisa saber é o seguinte
1
@KyleMit Ótima dica. Apenas usei essa abordagem para obter uma coleção de valores de campos ocultos e funcionou perfeitamente.
precisa
12
var selected=[];
 $('#multipleSelect :selected').each(function(){
     selected[$(this).val()]=$(this).text();
    });
console.log(selected);

Mais uma abordagem para esse problema. A matriz selecionada terá os índices como valores da opção e cada item da matriz terá o texto como valor.

por exemplo

<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 as opções 1 e 2 estiverem selecionadas.

a matriz selecionada será:

selected['abc']=1; 
selected['def']=2.
Joz Naveen Joz
fonte
5

Apenas por uma linha

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

Saída: ["texto1", "texto2"]

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

Saída: ["valor1", "valor2"]

Se você usar .join ()

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

Saída: texto1, texto2, texto3

hardika
fonte
4

Código 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>   

Código JQuery:

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

});

Espero que funcione

Prabhagaran
fonte
13
Não "espere que funcione", se você não tiver certeza se é a resposta, teste-a e tenha certeza!
Sterling Archer
6
Se você não tiver certeza da resposta, não a publique .. !! não estamos aqui por esperanças .. !! LOL
Clain Dsilva
3
E aí cara. Funciona perfeitamente. Confira. Você deveria esperar isso. Não faça comentários
irrelevantes
2
Este é um uso ineficiente do jQuery. A melhor abordagem é prefaciar um seletor de ID como este: $('#multiple').find(':selected')@Prabhagaran
Can't_mutably_borrow
@YounisShah I dificilmente dizem que é "ineficiente", como a diferença de tempo é relatividade nada ...
NorCalKnockOut
0

Obter valores selecionados no separador de vírgulas

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

Basta usar isso

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