jQuery para recuperar y establecer el valor de la opción seleccionada del elemento de selección html


126

Estoy tratando de recuperar y establecer el valor seleccionado de un elemento seleccionado (lista desplegable) con jQuery.

para retrievel he intentado $("#myId").find(':selected').val(), así como$("#myId").val() pero ambos regresan indefinidos.

Cualquier idea sobre este problema sería muy apreciada.


si está usando asp .net, es posible que no sean los mismos una vez procesados.
Rigobert Song

Respuestas:


154

La forma en que lo tienes es correcta en este momento. O el id de select no es lo que dices o tienes algunos problemas en el dom.

Verifique el Id del elemento y también verifique que su marcado valide aquí en W3c.

Sin una dom jQuery válida no puede funcionar correctamente con los selectores.

Si las identificaciones son correctas y su dom valida, se aplica lo siguiente:

Para leer Seleccione el valor de la opción

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

Para establecer el valor de la opción de selección

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

Para leer el texto seleccionado

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

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

@NithinPaul no es un comentario realmente, haga una pregunta que muestre html para que alguien pueda intentar resolver qué está mal. ¡No estoy seguro de cómo puede esperar que alguien lo resuelva con algunos formularios web / código mvc!
Redsquare

248

para obtener / establecer la propiedad real SelectedIndex del elemento select use:

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

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

19
Es importante tener en cuenta que la función prop () se implementó en la versión 1.6, por lo que las versiones anteriores no tienen esta funcionalidad.
RobB

18
Me gusta esta respuesta porque en realidad responde a la pregunta de acceder al índice, no solo al valor.
Pablo Díaz

44
sí. Pensé que esa era la pregunta original.
Jack Holt

Probablemente también podría usar attr con la misma sintaxis y estar bien.
Yitzhak

77
@ M. YitzhakSamuel .attr()y .prop()no son sinónimos. Funcionará en ciertos casos donde un atributo también es una propiedad, por ejemplo, .attr('id')es igual a .prop('id'). En este caso, .prop('selectedIndex')es igual a .get(0).selectedIndex.
WynandB

7

$('#myId').val() debería hacerlo, si no lo intentara:

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

4

Al configurar con JQM, no olvide actualizar UI:

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

Gracias por esta pepita: me preguntaba por qué el nuevo valor no aparece en la pantalla después de cambiar el índice seleccionado con $ ("# slot-choice"). Prop ("selectedIndex", n).
Samik R

3

$("#myId").val() debería funcionar si myid es el id del elemento select!

Esto establecería el elemento seleccionado: $("#myId").val('VALUE');


1

Supongamos que ha creado una lista desplegable con la etiqueta SELECT de la siguiente manera,

<select id="Country">

Ahora, si desea ver cuál es el valor seleccionado del menú desplegable utilizando JQuery, simplemente coloque la siguiente línea para recuperar ese valor.

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

Funcionará bien.


0

Sé que esto es viejo, pero tuve un momento difícil con Razor, no pude hacerlo funcionar sin importar cuánto lo intenté. Seguí volviendo como "indefinido" sin importar si usé "texto" o "html" para el atributo. Finalmente agregué el atributo "data-value" a la opción y lo leyó bien.

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

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

0

$ ("opción #myId: seleccionado") .text (); le dará el texto que seleccionó en el elemento desplegable. de cualquier manera puede cambiarlo a .val (); para obtener el valor de ello. verifique la codificación a continuación

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

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.