jQuery para recuperar e definir o valor da opção selecionada do elemento de seleção html


126

Estou tentando recuperar e definir o valor selecionado de um elemento de seleção (lista suspensa) com o jQuery.

para recuperar eu tentei $("#myId").find(':selected').val(), bem como, $("#myId").val()mas ambos retornam indefinidos.

Qualquer visão sobre esse problema seria muito apreciada.


se você estiver usando asp .net, eles podem não ser os mesmos depois de renderizados!
9788 Rigobert Song

Respostas:


154

O jeito que você tem está correto no momento. O ID do select não é o que você diz ou você tem alguns problemas no domínio.

Verifique o ID do elemento e também verifique se a sua marcação é válida aqui no W3c.

Sem um domínio válido, o jQuery não pode funcionar corretamente com os seletores.

Se os IDs estão corretos e seu domínio é validado, o seguinte se aplica:

Ler valor da opção de seleção

$('#selectId').val();

Para definir o valor da opção de seleção

$('#selectId').val('newValue');

Para ler o texto selecionado

$('#selectId>option:selected').text();

@ Html.DropDownList ("CoinTypes", (SelectList) ViewBag.RequiredLevel, new {@class = "control-form", @ style = "height: 21px; margin-top: 5px;"}) mas $ ('# CoinTypes ') .val (@ ViewBag.CoinType); não está selecionando
Nithin Paul

@NithinPaul realmente não é um comentário, faça uma pergunta que mostre html para que alguém possa realmente tentar descobrir o que está errado. Não tenho certeza de como você pode esperar que alguém resolva isso a partir de algum código webforms / mvc!
redsquare 27/02

248

para obter / definir a propriedade selectedIndex real do elemento select, use:

$("#select-id").prop("selectedIndex");

$("#select-id").prop("selectedIndex",1);

19
É importante observar que o recurso prop () foi implementado na versão 1.6 para que as versões anteriores não possuam essa funcionalidade.
RobB 11/11

18
Eu gosto dessa resposta porque ela realmente responde à questão de acessar o índice, não apenas o valor.
Pablo Diaz

4
sim. Eu pensei que era a pergunta original.
Jack Holt

Você provavelmente também pode usar attr com a mesma sintaxe e ficar bem.
precisa

7
@ M.YitzhakSamuel .attr()e .prop()não são sinônimos. Ele funcionará em certos casos em que um atributo também é uma propriedade, por exemplo, .attr('id')é igual a .prop('id'). Nesse caso, .prop('selectedIndex')é igual a .get(0).selectedIndex.
WynandB

7

$('#myId').val() deve fazê-lo, na falta de tentar:

$('#myId option:selected').val()

4

Ao definir com JQM, não se esqueça de atualizar o UI:

$('#selectId').val('newValue').selectmenu('refresh', true);

Obrigado por este nugget - estava se perguntando por que o novo valor não aparece na tela depois de alterar o selectedIndex com $ ("# slot-choice"). Prop ("selectedIndex", n).
precisa saber é o seguinte

3

$("#myId").val()deve funcionar se myidfor o id do elemento select!

Isso definiria o item selecionado: $("#myId").val('VALUE');


1

Suponha que você tenha criado uma lista suspensa usando a tag SELECT da seguinte maneira,

<select id="Country">

Agora, se você quiser ver qual é o valor selecionado no menu suspenso usando JQuery, basta colocar a seguinte linha para recuperar esse valor.

var result= $("#Country option:selected").text();

funcionará bem.


0

Sei que é velho, mas passei um bom tempo com o Razor, não consegui fazê-lo funcionar, por mais que tentasse. Mantive o retorno como "indefinido", independentemente de eu ter usado "texto" ou "html" como atributo. Por fim, adicionei o atributo "data-value" à opção e lia isso muito bem.

 <option value="1" data-value="MyText">MyText</option>

 var DisplayText = $(this).find("option:selected").attr("data-value");

0

$ ("#myId opção: selecionada") .text (); fornecerá o texto que você selecionou no elemento suspenso. de qualquer maneira, você pode alterá-lo para .val (); para obter o valor disso. verifique a codificação abaixo

<select id="myId">
    <option value="1">Mr</option>
    <option value="2">Mrs</option>
    <option value="3">Ms</option>`
    <option value="4">Dr</option>
    <option value="5">Prof</option>
</select>

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.