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


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>

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

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.

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


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


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

0

Basta usar isso

$('#multipleSelect').change(function() {
    var selectedValues = $(this).val();  
});
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.