Como obter todas as opções de um select usando o jQuery?


Respostas:


612

Usar:

$("#id option").each(function()
{
    // Add $(this).val() to your list
});

.each () | Documentação da API jQuery


63
Nenhuma das operações JavaScript requer jQuery. O jQuery é uma questão de escolha para simplificar as operações JS.
ruuter

8
você também pode fazer: $ ("# id option"). each (function (name, val) {var opt = val.text;});
Kofifus

3
$.mapé muito mais elegante e menos propenso a erros (veja abaixo).
Elliot Cameron

1
$('#id option').map((index, option) => option.value): Nota como a assinatura de retorno de chamada é revertida em comparação com o JS "vanilla" mapfunction ( (item, index) =>)
imrok

168

Não conheço jQuery, mas sei que, se você obtiver o elemento select, ele conterá um objeto 'opções'.

var myOpts = document.getElementById('yourselect').options;
alert(myOpts[0].value) //=> Value of the first option

74
+1. Não recorra à complexa magia de seletores do jQuery para coisas que já têm implementações bastante eficientes incorporadas no antigo DOM comum.
bobince

19
Por que não, @bobince? Se você usa o jQuery principalmente, é mais rápido, tanto com menos código a ser escrito, quanto mais rápido, para não tentar descobrir se você deve mudar para o javascript regular nesse caso. E seu código é mais consistente.
Andrew

139

$.map é provavelmente a maneira mais eficiente de fazer isso.

var options = $('#selectBox option');

var values = $.map(options ,function(option) {
    return option.value;
});

Você pode adicionar opções de alteração $('#selectBox option:selected')se desejar apenas as que estão selecionadas.

A primeira linha seleciona todas as caixas de seleção e coloca seu elemento jQuery em uma variável. Em seguida, usamos a .mapfunção do jQuery para aplicar uma função a cada um dos elementos dessa variável; tudo o que estamos fazendo é retornar o valor de cada elemento, pois é com isso que nos preocupamos. Como estamos retornando-os para dentro da função map, na verdade, ele cria uma matriz de valores conforme solicitado.


3
Esta é a solução mais elegante da IMO. O mapa é uma construção muito poderosa que se encaixa exatamente nessa situação.
hazerd

1
Eu realmente gosto da sua solução - é a abordagem que segui. No entanto, se você deseja apenas os valores selecionados, é ainda mais trivial: $('#selectBox').val()retornará uma matriz dos valores selecionados.
Whoisthemachine

Olá, @PCasagrande Tenho um nome de atributo personalizado 'tipo de dados'. Como posso obter o valor disso usando sua solução? O que estou fazendo é 'option.data-type', mas isso está me dando NaN. Desde já, obrigado.
Me_developer 11/11/19

Olá, @PCasagrande, obtive o que precisava fazendo '$ (option, this) .attr ("data-type")'. Mas se você tiver algo melhor, me avise. Obrigado. :)
Me_developer 11/11/19

Eu acho que você pode simplesmente fazer 'return option.attr ("data-type");' no mapa Isso deve fornecer uma matriz dos valores dos tipos de dados.
PCasagrande 13/01

74

Algumas respostas usam each, mas mapé uma alternativa melhor aqui IMHO:

$("select#example option").map(function() {return $(this).val();}).get();

Existem (pelo menos) duas mapfunções no jQuery. A resposta de Thomas Petersen usa "Utilities / jQuery.map"; esta resposta usa "Traversing / map" (e, portanto, um código um pouco mais limpo).

Depende do que você fará com os valores. Se você, digamos, quiser retornar os valores de uma função, mapé provavelmente a melhor alternativa. Mas se você vai usar os valores diretamente, provavelmente deseja each.


4
Você pode realmente usar this.value em vez de $ (this) .val () aqui. Você também se sentiria melhor ao encontrar os filhos no seletor inicial (opção #example). Embora seja bom com o get () no final.
26480 Alex Barrett

1
@ Alex Barret: Bem, é possível resolver esse problema sem usar o jQuery. Chamar jQuery com um elemento como argumento apenas envolverá o elemento em um objeto jQuery (ou seja, nenhuma árvore atravessará, ou seja, não será tão cara). Então, talvez como uma micro-otimização, sim.
27609

mapa FTW. É exatamente assim que deve ser feito. O get () no final parece desnecessário, no entanto (que retorna o nó DOM e val () já nos fornece uma string, então ...?) Var opts = $ ('# cm_amt option'). Map (function ( ) {return parseInt ($ (this) .val ());});
sbeam

3
@sbeam: "Como o valor retornado é um array envolto em jQuery, é muito comum que get()o objeto retornado trabalhe com um array básico." - api.jquery.com/map
cic

Ele me ajudou muito, eu queria que o texto não o valor, então eu só mudou de text()vez val(). Obrigado ! (I causou você passar por cima de 1000 ;->)
ParPar

52
$('select#id').find('option').each(function() {
    alert($(this).val());
});

1
Este é o ticket, porque eu gosto de armazenar em cache elementos em variáveis ​​no init, em vez de usar o seletor.
Doug Barba

1
Também funciona com $ (this) (que é o que estava procurando) por exemplo,
Hugh Seagraves

16
$("#id option").each(function()
{
    $(this).prop('selected', true);
});

Embora, a maneira CORRETA seja definir a propriedade DOM do elemento, da seguinte maneira:

$("#id option").each(function(){
    $(this).attr('selected', true);
});

4
Não seria .attr ('selected', 'selected')?
v010dya

16

Isso colocará os valores das opções #myselectboxem uma boa matriz limpa para você:

// First, get the elements into a list
var domelts = $('#myselectbox option');

// Next, translate that into an array of just the values
var values = $.map(domelts, function(elt, i) { return $(elt).val();});

Você pode reduzi-lo para:$.map(domelts, elt=> $(elt).val())
Jonno_FTW 9/09/19

11

Você pode pegar todos os seus "valores selecionados" pelo nome das caixas de seleção e apresentá-los em uma picada separada por ",".

Uma boa maneira de fazer isso é usar $ .map () do jQuery:

var selected_val = $.map($("input[name='d_name']:checked"), function(a)
    {
        return a.value;
    }).join(',');

alert(selected_val);

6
esse código é bastante ilegível, eu nunca o usaria mesmo que seja legal.
Click Upvote

7
também a pergunta é sobre selecte optionnão caixas de seleção.
Dementic


3

Você pode usar o seguinte código para isso:

var assignedRoleId = new Array();
$('#RolesListAssigned option').each(function(){
    assignedRoleId.push(this.value);
});

2

Para a opção de seleção múltipla:

$('#test').val()retorna a lista de valores selecionados. $('#test option').lengthretorna o número total de opções (selecionadas e não selecionadas)


1

Este é um script simples com jQuery:

var items = $("#IDSELECT > option").map(function() {
    var opt = {};
    opt[$(this).val()] = $(this).text();
    return opt;
}).get();
var selectvalues = [];

for(var i = 0; i < items.length; i++) {
    for(key in items[i]) {


        var id = key;
        var text = items[i][key];

        item = {}
        item ["id"] = id;
        item ["text"] = text;

        selectvalues.push(item);

    }
}
console.log(selectvalues);
copy(selectvalues);
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

1

Aqui está um exemplo simples no jquery para obter todos os valores, textos ou valor do item selecionado ou texto do item selecionado

$('#nCS1 > option').each((index, obj) => {
   console.log($(obj).val());
})

printOptionValues = () => {

  $('#nCS1 > option').each((index, obj) => {
    console.log($(obj).val());
  })

}

printOptionTexts = () => {
  $('#nCS1 > option').each((index, obj) => {
    console.log($(obj).text());
  })
}

printSelectedItemText = () => {
  console.log($('#nCS1 option:selected').text());
}

printSelectedItemValue = () => {
  console.log($('#nCS1 option:selected').val());
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select size="1" id="nCS1" name="nCS1" class="form-control" >
					<option value="22">Australia</option>
          <option value="23">Brunei</option>
          <option value="33">Cambodia</option>
          <option value="32">Canada</option>
          <option value="27">Dubai</option>
          <option value="28">Indonesia</option>
          <option value="25">Malaysia</option>				
</select>
<br/>
<input type='button' onclick='printOptionValues()' value='print option values' />
<br/>
<input type='button' onclick='printOptionTexts()' value='print option texts' />
<br/>
<input type='button' onclick='printSelectedItemText()' value='print selected option text'/>
<br/>
<input type='button' onclick='printSelectedItemValue()' value='print selected option value' />


0
$("input[type=checkbox][checked]").serializeArray();

Ou:

$(".some_class[type=checkbox][checked]").serializeArray();

Para ver os resultados:

alert($("input[type=checkbox][checked]").serializeArray().toSource());

0

Se você estiver procurando todas as opções com algum texto selecionado, o código abaixo funcionará.

$('#test').find("select option:contains('B')").filter(":selected");

0

O caminho mais curto

$(() => {
$('#myselect option').each((index, data) => {
    console.log(data.attributes.value.value)
})})

ou

export function GetSelectValues(id) {
const mData = document.getElementById(id);
let arry = [];
for (let index = 0; index < mData.children.length; index++) {
    arry.push(mData.children[index].value);
}
return arry;}
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.