jQuery Obter opção selecionada no menu suspenso

1128

Normalmente eu uso $("#id").val()para retornar o valor da opção selecionada, mas desta vez não funciona. A tag selecionada tem o IDaioConceptName

Código HTML

<label>Name</label>
<input type="text" name="name" />
<select id="aioConceptName">
    <option>choose io</option>
    <option>roma</option>
    <option>totti</option>
</select>
William Kinaan
fonte
2
você poderia mostrar a marcação do elemento#aioConceptName
Jorge
2
é estranho, porque funciona neste exemplo jsfiddle.net/pAtVP , você tem certeza de que o evento é disparado em seu ambiente?
Jorge
5
possível duplicata do jQuery: Get opção selecionada suspensa
Kenny Linsky
11
Um pensamento tardio, mas .val () não funcionará, a menos que você defina o valueatributo nesses <option>s, certo?
26613 Jacob Valenta
8
Versões recentes do jQuery (testadas com 1.9.1) não têm problemas com essa marcação. Para o exemplo acima, $("#aioConceptName").val()retorna choose io.
Salman Um

Respostas:

1846

Para opções suspensas, você provavelmente deseja algo como isto:

var conceptName = $('#aioConceptName').find(":selected").text();

O motivo val()não funciona é que clicar em uma opção não altera o valor da lista suspensa - apenas adiciona a :selectedpropriedade à opção selecionada, que é filha da lista suspensa.

Elliot Bonneville
fonte
41
Ah, ok, você atualizou sua pergunta com HTML. Esta resposta é agora irrelevante. Por uma questão de fato, .val()deve funcionar no seu caso - você deve ter um erro em outro lugar.
Elliot Bonneville
13
para o val()por que não usar var conceptVal = $("#aioConceptName option").filter(":selected").val();?
Testador
61
Que tal um mais simples var conceptVal = $("#aioConceptName option:selected").val()?
Klemen Tušar
5
Eu ainda achei isso útil para encontrar a opção selecionada em um select em que obtive a lista suspensa anteriormente - por exemplo, var mySelect = $('#mySelect'); / * ... mais código acontece ... * / var selectedText = mySelect.find(':selected').text();
Charles Wood
18
Na verdade, a razão .val () não está funcionando para ele é porque ele não atribuiu um valor a suas opções, e é por isso que ele tem que usar seu método para recuperar o texto selecionado, portanto outra correção seria mudar <option> escolha io </option> para <option value = 'choose io'> escolha io </option> Embora sua solução seja provavelmente mais rápida e mais prática, imaginei que eu declararia isso de qualquer maneira, para que ele entenda melhor por que não estava funcionando para ele.
Jordan LaPrise 23/03/16
342

Defina os valores para cada uma das opções

<select id="aioConceptName">
    <option value="0">choose io</option>
    <option value="1">roma</option>
    <option value="2">totti</option>
</select>

$('#aioConceptName').val()não funcionou porque .val()retorna o valueatributo Para que funcione corretamente, os valueatributos devem ser definidos em cada um <option>.

Agora você pode ligar em $('#aioConceptName').val()vez de todo esse :selectedvodu ser sugerido por outros.

Jacob Valenta
fonte
12
Ressalva: se nenhuma opção for selecionada, $('#aioConceptName').val()retorna nulo / "indefinido"
gordon
Isso me garantiu que $ ('# myselect'). Val () estava correto; eu simplesmente me esqueci de dar um id ao select!
ZZAPPER
4
Uma das minhas opções selecionadas é uma promptopção especial <option>Please select an option</option>. No meu caso, não foi um problema adicionar um atributo de valor em branco, <option value="">Please...</option>mas acredito que em alguns casos não ter um atributo de valor faz sentido. Mas +1 porque suas palavras no vodoo me fizeram sorrir.
Cyril Duchon-Doris
Não é val()selecionar o em valuevez do texto dentro do option? Ou seja, ele seleciona em 1vez de roma.
Deathlock
4
@ Deadlock Esse é o ponto principal .val(). Se você deseja manipular / usar o texto, use $(":selected).text()ou defina o valor e o texto como iguais.
precisa
162

Eu me deparei com essa pergunta e desenvolvi uma versão mais concisa da resposta de Elliot BOnneville:

var conceptName = $('#aioConceptName :selected').text();

ou genericamente:

$('#id :pseudoclass')

Isso economiza uma chamada extra de jQuery, seleciona tudo de uma só vez e fica mais claro (minha opinião).

Ed Orsi
fonte
1
@JohnConde A resposta aceita no Meta não concorda com você: meta.stackexchange.com/questions/87678/… . Na minha opinião, Ed deu uma boa resposta e apenas forneceu algumas referências extras.
itsbruce
Eles podem permitir que ele, mas ainda é um recurso ruim
John Conde
1
Removido o link w3schools, não era estritamente necessário e uma pesquisa no Google por "jQuery pseduo classes" fornece muitas informações.
Ed Orsi
@EdOrsi: Apesar de salvar uma chamada extra do jQuery, evita aproveitar o aumento de desempenho fornecido pelo querySelectorAll()método DOM nativo (consulte a documentação do jQuery ). Portanto, deve ser mais lento que a solução da Eliot .
Alexander Abakumov
Eu provavelmente preferiria usá .find(':selected')-lo, pois ele permite que você o chame de um retorno de chamada associado a um evento ... como$('#aioConceptname').bind('change', function(el) { console.log ( $(el).find(':selected').text() ); });
Armstrongest
58

Tente isso por valor ...

$("select#id_of_select_element option").filter(":selected").val();

ou isso para texto ...

$("select#id_of_select_element option").filter(":selected").text();
Vladimir Djuricic
fonte
49

Se você estiver no contexto de evento, no jQuery, poderá recuperar o elemento de opção selecionado usando:
$(this).find('option:selected')assim:

$('dropdown_selector').change(function() {
    //Use $option (with the "$") to see that the variable is a jQuery object
    var $option = $(this).find('option:selected');
    //Added with the EDIT
    var value = $option.val();//to get content of "value" attrib
    var text = $option.text();//to get <option>Text</option> content
});

Editar

Como mencionado por PossessWithin , minha resposta apenas responde à pergunta: Como selecionar a opção "Opção" selecionada.

Em seguida, para obter o valor da opção, use option.val().

JoDev
fonte
2
Sem falhas! Apenas não esqueça que você deve adicionar $(this).find('option:selected').val()no final para obter o valor do elemento option, ou $(this).find('option:selected').text()para obter o texto. :)
Diego Fortes
31

Você já pensou em usar javascript antigo simples?

var box = document.getElementById('aioConceptName');

conceptName = box.options[box.selectedIndex].text;

Consulte também Obtendo uma opção de texto / valor com JavaScript

Roonaan
fonte
22
$('#aioConceptName option:selected').val();
wild_nothing
fonte
16

Lendo o valor (não o texto) de uma seleção:

var status = $("#Status").val();
var status = $("#Status")[0].value;
var status = $('#Status option:selected').val();

Como desativar uma seleção? nas duas variantes, o valor pode ser alterado usando:

UMA

O usuário não pode interagir com o menu suspenso. E ele não sabe que outras opções podem existir.

$('#Status').prop('disabled', true);

B

O usuário pode ver as opções no menu suspenso, mas todas elas estão desativadas:

$('#Status option').attr('disabled', true);

Nesse caso, $("#Status").val() funcionará apenas para versões jQuery menores que 1.9.0. Todas as outras variantes funcionarão.

Como atualizar uma seleção desativada?

No código por trás, você ainda pode atualizar o valor em sua seleção. Está desativado apenas para usuários:

$("#Status").val(2);

Em alguns casos, pode ser necessário acionar eventos:

$("#Status").val(2).change();
profimedica
fonte
11
<select id="form-s" multiple="multiple">
    <option selected>city1</option>
    <option selected value="c2">city2</option>
    <option value="c3">city3</option>
</select>   
<select id="aioConceptName">
    <option value="s1" selected >choose io</option>
    <option value="s2">roma </option>
    <option value="s3">totti</option>
</select>
<select id="test">
    <option value="s4">paloma</option>
    <option value="s5" selected >foo</option>
    <option value="s6">bar</option>
</select>
<script>
$('select').change(function() {
    var a=$(':selected').text(); // "city1city2choose iofoo"
    var b=$(':selected').val();  // "city1" - selects just first query !
    //but..
    var c=$(':selected').map(function(){ // ["city1","city2","choose io","foo"]
        return $(this).text();
    }); 
    var d=$(':selected').map(function(){ // ["city1","c2","s1","s5"]
        return $(this).val();
    });
    console.log(a,b,c,d);
});
</script>
Ol Sen
fonte
:) a coisa boa é :selected.. val () ou text () não está funcionando corretamente em várias opções de seleção, apenas se alguma matriz for produzida como ela map()poderia fazer.
precisa saber é
10

você deve usar esta sintaxe:

var value = $('#Id :selected').val();

Então tente este código:

var values = $('#aioConceptName :selected').val();

você pode testar no Fiddle: http://jsfiddle.net/PJT6r/9/

veja sobre esta resposta neste post

DLMAN
fonte
9

Usando o jQuery, basta adicionar um changeevento e obter o valor ou texto selecionado dentro desse manipulador.

Se você precisar de texto selecionado, use este código:

$("#aioConceptName").change(function () {
    alert($("#aioConceptName :selected").text())
});

Ou, se você precisar de um valor selecionado, use este código:

$("#aioConceptName").change(function () {
    alert($("#aioConceptName :selected").attr('value'))
});
Sanman
fonte
9

Use a jQuery.val()função também para selecionar elementos:

O método .val () é usado principalmente para obter os valores dos elementos do formulário, como input, select e textarea. No caso de elementos de seleção, ele retorna nullquando nenhuma opção é selecionada e uma matriz que contém o valor de cada opção selecionada quando há pelo menos uma e é possível selecionar mais porque o multipleatributo está presente.

$(function() {
  $("#aioConceptName").on("change", function() {
    $("#debug").text($("#aioConceptName").val());
  }).trigger("change");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<select id="aioConceptName">
  <option>choose io</option>
  <option>roma</option>
  <option>totti</option>
</select>
<div id="debug"></div>

Salman A
fonte
8

Para quem descobriu a melhor resposta, não funciona.

Tente usar:

  $( "#aioConceptName option:selected" ).attr("value");

Funciona para mim em projetos recentes, por isso vale a pena dar uma olhada.

user2709153
fonte
7

Apenas isso deve funcionar:

var conceptName = $('#aioConceptName').val();
d.popov
fonte
6

Simples e fácil:

Seu menu suspenso

<select id="aioConceptName">
    <option>choose io</option>
    <option>roma</option>
    <option>totti</option>
</select>

Código Jquery para obter o valor selecionado

$('#aioConceptName').change(function() {
    var $option = $(this).find('option:selected');

    //Added with the EDIT
    var value = $option.val(); //returns the value of the selected option.
    var text = $option.text(); //returns the text of the selected option.
});
Juan J
fonte
4

Você pode tentar depurá-lo desta maneira:

console.log($('#aioConceptName option:selected').val())
swathi
fonte
4

Para obter o valor da tag selecionada:

 $('#id_Of_Parent_Selected_Tag').find(":selected").val();

E se você deseja obter texto, use este código:

 $('#id_Of_Parent_Selected_Tag').find(":selected").text();

Por exemplo:

<div id="i_am_parent_of_select_tag">
<select>
        <option value="1">CR7</option>
        <option value="2">MESSI</option>
</select>
</div>


<script>
 $('#i_am_parent_of_select_tag').find(":selected").val();//OUTPUT:1 OR 2
 $('#i_am_parent_of_select_tag').find(":selected").text();//OUTPUT:CR7 OR MESSI
</script>
mamal
fonte
2

Se você deseja pegar o atributo 'value' em vez do nó de texto, isso funcionará para você:

var conceptName = $('#aioConceptName').find(":selected").attr('value');
Drodarious
fonte
Esta é apenas parcialmente uma solução - que também é necessário definir o valor para cada opção - este já está coberto pela resposta de Jacob Valetta
David
2

tente este

$(document).ready(function() {

    $("#name option").filter(function() {
        return $(this).val() == $("#firstname").val();
    }).attr('selected', true);

    $("#name").live("change", function() {

        $("#firstname").val($(this).find("option:selected").attr("value"));
    });
});


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<select id="name" name="name"> 
<option value="">Please select...</option> 
<option value="Elvis">Elvis</option> 
<option value="Frank">Frank</option> 
<option value="Jim">Jim</option> 
</select>

<input type="text" id="firstname" name="firstname" value="Elvis" readonly="readonly">
Haris Sultan
fonte
2
$('nameofDropDownList').prop('selectedIndex', whateverNumberasInt);

Imagine o DDL como uma matriz com índices, você está selecionando um índice. Escolha o que você deseja configurá-lo com seu JS.

Satista
fonte
1

Você pode usar $("#drpList").val();

Praveen Patel G
fonte
3
Você estava certo; no entanto, ele relatou o texto, a pergunta está errada.
Federico Navarrete
1

para buscar uma seleção com a mesma classe = nome, você poderia fazer isso, para verificar se uma opção de seleção está selecionada.

var bOK = true;
$('.optKategorien').each(function(index,el){
    if($(el).find(":selected").text() == "") {
        bOK = false;
    }
});
Bludau Media
fonte
1

Eu tive o mesmo problema e descobri por que não estava funcionando no meu caso.
A página html foi dividida em diferentes fragmentos de html e descobri que tenho outro campo de entrada que carrega o mesmo ID do select, o que fazia val()com que ele estivesse sempre vazio
Espero que isso salve o dia para quem tem um problema semelhante.

Hasnaa Ibraheem
fonte
Na verdade, isso me despertou para o meu problema. Eu mesmo estava usando qty-field no data-target e .. qty_field no próprio id. Sempre verifique o básico duas ou mais vezes.
cdsaenz
1

Para usar $ ("# id"). val, você deve adicionar um valor à opção como esta:

<label>Name</label>
<input type="text" name="name" />
<select id="aioConceptName">
    <option value="choose">choose io</option>
</select>

mais, você pode usar

   $("#aioConceptName").find(':selected').text();

Eu desejo que ajude ..

Yusuf Azan
fonte
1

Aqui está a solução simples para esse problema.

$("select#aioConceptName").change(function () {
           var selectedaioConceptName = $('#aioConceptName').find(":selected").val();;
           console.log(selectedaioConceptName);
        });
Sanjaya
fonte
1
var selectedaioConceptName = $('#aioConceptName option:selected').val();é melhor do que usar outro find ()
Sadee
0

Provavelmente, sua melhor aposta nesse tipo de cenário é usar o método de alteração do jQuery para encontrar o valor selecionado no momento, da seguinte forma:

$('#aioConceptName').change(function(){

   //get the selected val using jQuery's 'this' method and assign to a var
   var selectedVal = $(this).val();

   //perform the rest of your operations using aforementioned var

});

Eu prefiro esse método porque você pode executar funções para cada opção selecionada em um determinado campo de seleção.

Espero que ajude!

Werner ZeBeard Bessinger
fonte
0

Geralmente, você precisa não apenas obter o valor selecionado, mas também executar alguma ação. Então, por que não evitar toda a magia do jQuery e apenas passar o valor selecionado como argumento para a chamada de ação?

<select onchange="your_action(this.value)">
   <option value='*'>All</option>
   <option ... />
</select>
Roland
fonte
0

Você pode selecionar usando a opção exata selecionada: Abaixo você verá innerText

$("select#aioConceptName > option:selected").text()

Enquanto abaixo lhe dará valor.

$("select#aioConceptName > option:selected").val()
Hafiz Shehbaz Ali
fonte