0

Tenho esse <select> que é gerado de forma dinâmica

<select id="select_exemplo">
    <option id="exemplo">
    <option id="exemplo" value="10">teste 1 </option>
    <option id="exemplo" value="11">teste 2 </option>
    <option id="exemplo" value="18">teste 3</option>
    <option id="exemplo" value="25">teste 4</option>
</select>

Preciso pegar com o jQuery em forma de array todos os valores contidos no value, por exemplo [10,11,18,25]. Código jQuery:

valor= jQuery('#select_exemplo').val()

Só que me retorna só o primeiro, no caso o [10].

2
  • 2
    Do jeito que fez você está pegando o val() do select e não dos options e outra coisa errada que está fazendo é repetir id´s.
    – LeAndrade
    Commented 30/01/2019 às 16:17
  • O HTML está mal formado. O option vazio tem que ter fechamento de tag. Commented 30/01/2019 às 17:09

2 Respostas 2

6

Primeira coisa que fiz foi remover os id's "exemplo", já que em uma página html não se pode repetir um id.

Você pode fazer desta forma

var valores = [];
$('#select_exemplo').find('option').each(function() {
  var valor = $(this).val();
  if(valor != "")
    valores.push(valor);
});
console.log(valores);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select_exemplo">
   <option>
   <option value="10">teste 1 </option>
   <option value="11">teste 2 </option>
   <option value="18">teste 3</option>
   <option value="25">teste 4</option>
</select>

Selecionei o "select" e usei o "find" para pegar todos os "option" e por fim fiz um foreach pegando cada val e jogando em um array.

E por fim fiz um if para não pega valores vazios.

4
  • dessa forma retornou assim:[ 0:teste1 teste2 teste3 teste4 1:10 2:11 3:18 4:25 ] Commented 30/01/2019 às 16:33
  • Pode ser que na hora que você foi selecionar o elemento você utilizou a sua classe no lugar do seu id, e haja dois elementos com a mesma classe, desta forma ele vai pegar dois elementos, porem um teria que esta sem "value" e o outro com, você pode ver que no exemplo ele pega apenas os values. Commented 30/01/2019 às 16:37
  • entendi, teria como eu fazer também tirando a posição 0 do array? Commented 30/01/2019 às 16:43
  • 1
    Se você não quer pegar o primeiro "option" por esta vazio, o código que fiz já não vai pegar, já que fiz o "if(valor != "")...", mas se de qualquer forma você deseja remover o primeiro item do array basta fazer valores.splice(0, 1); Commented 30/01/2019 às 16:47
1

Dei uma geral no seu HTML, que estava mal formado: não estava fechando o primeiro <option/>, que é vazio no seu caso. Caso não fosse, bastaria delegar-lhe um atributo value vazio, como exemplifiquei abaixo.

Outra coisa é que o .val() do <select/> só tem o valor do <option> selecionado. Para obter todos os <option>s, você precisa determinar isso no seu seletor jQuery: $("#select_exemplo option") e escrever um algoritmo que itere por cada <option/> e colete as informações desejadas.

$(function () {
  var vals = [], val;
  $("#select_exemplo option").each(function () {
    (val = $(this).val()) && vals.push(val);
  });
  console.log('resposta: ' + vals.toString());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="select_exemplo">
  <option value=''>[Selecione]</option>
  <option value='10'>Maçã</option>
  <option value='11'>Banana</option>
  <option value='18'>Tomate</option>
  <option value='25'>Pêssego</option>
  <option value='52'>Melancia</option>
</select>

O .each() mostrado acima itera sobre os elementos selecionados com o seletor jQuery, como explicado na documentação da API,

Description: Iterate over a jQuery object, executing a function for each matched element.

A palavra reservada this refere-se ao objeto jQuery iterado, quando usado dentro da função de callback,

More importantly, the callback is fired in the context of the current DOM element, so the keyword this refers to the element.

Portanto, ao se fazer $(this).val() dentro do bloco da função passada para $("#select_exemplo option").each() como callback, estamos obtendo o .val() de cada <option> contido no elemento (<select>) cujo id é select_exemplo,

$(function () { // Execute quando acabar de carregar toda a página.

  var vals = [], val; // Declaração das variáveis vals e val

  $("#select_exemplo option")/* < selecione os <option>s filhos 
                                  do item com id select_exemplo*/
                             .each(/* < itere */
                                   function () {
    (val = $(this)/* < pegue o <option> da iteração atual*/
                  .val() /* < pegue o value dele */
                        ) && /* < só continue executando à direita
                                  se não for string vazia */
                             vals.push(val) /* < enfileire val em vals */;
  });
  console.log('resposta: ' + vals.toString());/* < printe a resposta
                                                   separada por ","s */
});
2
  • 1
    pq usar function (i, e) sendo que as variáveis nunca são usadas no código? Commented 30/01/2019 às 16:41
  • 1
    Retirados i e e. Commented 30/01/2019 às 16:57

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .