jQuery Obter opção selecionada no menu suspenso

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>

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.

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.

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).

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();

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().

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

$('#aioConceptName option:selected').val();

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();

<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>

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

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'))
});

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>

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.

Apenas isso deve funcionar:

var conceptName = $('#aioConceptName').val();

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.
});

Você pode tentar depurá-lo desta maneira:

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

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>

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

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

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">

$('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.

Espero que isso também ajude a entender melhor e tente isso abaixo,

$('select[id="aioConceptName[]"] option:selected').each(function(key,value){
   options2[$(this).val()] = $(this).text();
   console.log(JSON.stringify(options2));
});

para obter mais detalhes, http://www.drtuts.com/get-value-multi-select-dropdown-without-value-attribute-using-jquery/

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

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;
    }
});

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.

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 ..

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

$("select#aioConceptName").change(function () {
           var selectedaioConceptName = $('#aioConceptName').find(":selected").val();;
           console.log(selectedaioConceptName);
        });

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!

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>

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()