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 */
});
val()
do select e não dos options e outra coisa errada que está fazendo é repetir id´s.