jQuery / Selector / :selected — Selecionar as opções escolhidas de um select
jQuery :selected corresponde aos option atualmente escolhidos dentro de um select. $("#fruit option:selected") obtém elementos; $("#fruit").val() lê diretamente o valor. O atributo HTML selected e o estado alterado pelo usuário podem ser diferentes.
Elementos, valores e rótulos
A referência :selected trata de opções, não caixas ou rádios. Restrinja a busca ao select ou formulário desejado para não misturar controles.
.text() é o rótulo e .val() é o valor. Em vários option, .val() retorna só o primeiro e .text() concatena os textos. Leia todos os valores múltiplos no próprio select; use map ou iteração para dados por elemento.
O exemplo separa uma fruta de vários temas, usando JavaScript como rótulo e js como identificador. Opções e optgroup desabilitados comparam seleção com valores aptos para envio.
Exemplo completo simples e múltiplo
Salve e abra selected-demo.html em UTF-8. A internet carrega jQuery completo 4.0.0, sem servidor ou compilação. Windows Edge com 4.0.0 e 3.7.1 verificou estado inicial, teclado, opções desabilitadas, seleção vazia e Reset.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Read selected options and submitted values</title>
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<style>
body { font: 16px/1.6 sans-serif; max-width: 740px; margin: 20px; }
label { display: block; margin-top: 12px; }
select, button { font: inherit; max-width: 100%; margin: 6px 0; }
#topics { display: block; min-width: 230px; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; }
</style>
</head>
<body>
<form id="chooser">
<label for="fruit">Fruit (single)</label>
<select id="fruit" name="fruit"><option value="apple">Apple</option><option value="banana">Banana</option></select>
<label for="topics">Topics (multiple)</label>
<select id="topics" name="topics" multiple size="6">
<option value="js" selected>JavaScript</option>
<option value="css">CSS</option>
<option value="html" selected disabled>HTML (disabled)</option>
<optgroup label="Unavailable group" disabled><option value="legacy" selected>Legacy</option></optgroup>
</select>
<button type="button" id="set">Set Banana and CSS</button>
<button type="button" id="clear">Clear topics</button>
<button type="button" id="restore">Reset</button>
</form>
<pre id="result" aria-live="polite"></pre>
<script>
jQuery(function ($) {
const $fruit = $("#fruit"), $topics = $("#topics"), form = document.querySelector("#chooser");
let changes = 0;
function values($options) { return $options.map(function () { return this.value; }).get(); }
function render() {
const $selected = $topics.find("option").filter(":selected");
const data = new URLSearchParams(new FormData(form));
$("#result").text("single=" + $fruit.val() + "\nsingleText=" + $fruit.find("option:selected").text() +
"\nselectedOptions=" + JSON.stringify(values($selected)) + "\nvalues=" + JSON.stringify($topics.val()) +
"\nselectedAttribute=" + JSON.stringify(values($topics.find("option[selected]"))) +
"\nform=" + data.toString() + "\nchanges=" + changes);
}
$fruit.add($topics).on("change", function () { changes++; render(); });
$("#set").on("click", function () {
$fruit.val("banana").trigger("change"); $topics.val(["css"]).trigger("change");
});
$("#clear").on("click", function () { $topics.val([]).trigger("change"); });
$("#restore").on("click", function () { form.reset(); changes = 0; render(); });
render();
});
</script>
</body>
</html>Fruit não tem atributo selected, mas o primeiro Apple fica escolhido. Três temas estão selecionados; somente js pode ser enviado.
single=apple
singleText=Apple
selectedOptions=["js","html","legacy"]
values=["js"]
selectedAttribute=["js","html","legacy"]
form=fruit=apple&topics=js
changes=0- Banana atualiza single e singleText, também por change do teclado.
- Set Banana and CSS deixa selectedOptions e values em ["css"], mas selectedAttribute continua ["js","html","legacy"].
- Clear topics gera dois arrays vazios; form mantém apenas fruit.
- Reset restaura inclusive HTML e Legacy desabilitados.
- Seleção múltipla manual usa teclas do sistema/navegador. Botões fornecem condições constantes de comparação.
selectedOptions enumera valores DOM escolhidos, values é .val() do select e selectedAttribute são atributos presentes. form representa FormData como consulta URL, sem enviar. changes conta manipuladores; Set emite um evento por controle, portanto dois.
Estado atual e atributo padrão
option.selected e :selected descrevem o presente. [selected] verifica o atributo; defaultSelected representa o padrão. Mudanças do usuário não reescrevem esse padrão do mesmo modo. Não use [selected] para consultar o estado atual.
.val(["css"]) muda a seleção e .val([]) esvazia a múltipla. O setter .val() não dispara change, por isso o exemplo emite explicitamente. Sem evento ou render, o relatório pode continuar antigo apesar da mudança real.
Desde jQuery 3, um múltiplo sem escolha retorna []. .val() de coleção option vazia é undefined. Um select simples sem escolha após valor desconhecido retorna null. Nem tudo é string vazia.
Reset chama form.reset() e render. Editar atributos padrão também mudaria o destino da restauração. Aqui são preservados e só os valores atuais mudam.
Desabilitados, :checked e aplicação
Opções desabilitadas, inclusive sob optgroup desabilitado, podem continuar selecionadas e ficar fora de .val() do select e FormData. Quantidade selecionada não é quantidade enviada: três contra um no início. Confira também name ausente ou select desabilitado.
:checked abrange opções, caixas e rádios. Restrito a option:checked obtém as mesmas opções aqui; globalmente pode misturar tipos.
:selected é extensão jQuery e não vale diretamente em document.querySelectorAll() nativo. O exemplo seleciona por CSS e filtra :selected. Em código nativo considere select.selectedOptions ou option:checked restrito.
Aplique cores e filtros uma vez ao iniciar e depois nas mudanças. Defina atualização para atribuições programadas, mostre textos com .text() em vez de HTML concatenado e valide identificadores e regras no servidor.
