Pregunta Cambiar el valor seleccionado de una lista desplegable con jQuery


Tengo una lista desplegable con valores conocidos. Lo que intento hacer es establecer la lista desplegable en un valor particular que sé que existe usando jQuery. Usando JavaScript regular, haría algo como:

ddl = document.getElementById("ID of element goes here");
ddl.value = 2; // 2 being the value I want to set it too.

Sin embargo, necesito hacer esto con jQuery, porque estoy usando una clase de CSS para mi selector (estúpido ASP.NET identificaciones de cliente ...).

Aquí hay algunas cosas que he intentado:

$("._statusDDL").val(2); // Doesn't find 2 as a value.
$("._statusDDL").children("option").val(2) // Also failed.

¿Cómo puedo hacerlo con jQuery?

Actualizar

Así que resultó que lo hice bien la primera vez con:

$("._statusDDL").val(2);

Cuando coloco una alerta justo arriba funciona bien, pero cuando elimino la alerta y la dejo funcionar a toda velocidad, obtengo el error

No se pudo establecer la propiedad seleccionada. Índice inválido

No estoy seguro si es un error con jQuery o Internet Explorer 6 (supongo que con Internet Explorer 6), pero es terriblemente molesto.


717
2018-01-31 19:39


origen


Respuestas:


Documentación de jQuery estados:

[jQuery.val] comprueba, o selecciona, todos los botones de opción, casillas de verificación y opciones de selección que coinciden con el conjunto de valores.

Este comportamiento está en jQuery versiones 1.2 y por encima.

Lo más probable es que quieras esto:

$("._statusDDL").val('2');

890
2018-01-31 19:43



Con el campo oculto, debes usarlo así:

$("._statusDDL").val(2);
$("._statusDDL").change();

o

$("._statusDDL").val(2).change();

103
2017-10-09 10:21



Solo un FYI, no necesita usar clases de CSS para lograr esto.

Puede escribir la siguiente línea de código para obtener el nombre de control correcto en el cliente:

$("#<%= statusDDL.ClientID %>").val("2");

ASP.NET mostrará la ID de control correctamente dentro de jQuery.


28
2018-04-21 02:16



Solo prueba con

$("._statusDDL").val("2");

y no con

$("._statusDDL").val(2);

21
2018-02-01 11:45



Estas soluciones parecen suponer que cada elemento en sus listas desplegables tiene una val () valor relacionado con su posición en la lista desplegable.

Las cosas son un poco más complicadas si este no es el caso.

A leer el índice seleccionado de una lista desplegable, usted usaría esto:

$("#dropDownList").prop("selectedIndex");

A conjunto el índice seleccionado de una lista desplegable, usted usaría esto:

$("#dropDownList").prop("selectedIndex", 1);

Tenga en cuenta que apuntalar() la característica requiere JQuery v1.6 o posterior.

Veamos cómo usarías estas dos funciones.

Supongamos que tiene una lista desplegable de nombres de meses.

<select id="listOfMonths">
  <option id="JAN">January</option>
  <option id="FEB">February</option>
  <option id="MAR">March</option>
</select>

Puede agregar un botón "Mes Anterior" y "Mes Siguiente", que mira el elemento de la lista desplegable actualmente seleccionada y lo cambia al mes anterior / siguiente:

<button id="btnPrevMonth" title="Prev" onclick="btnPrevMonth_Click();return false;" />
<button id="btnNextMonth" title="Next" onclick="btnNextMonth_Click();return false;" />

Y aquí está el JavaScript que ejecutarían estos botones:

function btnPrevMonth_Click() {
    var selectedIndex = $("#listOfMonths").prop("selectedIndex");
    if (selectedIndex > 0) {
        $("#listOfMonths").prop("selectedIndex", selectedIndex - 1);
    }
}
function btnNextMonth_Click() {
    //  Note:  the JQuery "prop" function requires JQuery v1.6 or later
    var selectedIndex = $("#listOfMonths").prop("selectedIndex");
    var itemsInDropDownList = $("#listOfMonths option").length;

    //  If we're not already selecting the last item in the drop down list, then increment the SelectedIndex
    if (selectedIndex < (itemsInDropDownList - 1)) {
        $("#listOfMonths").prop("selectedIndex", selectedIndex + 1);
    }
}

El siguiente sitio también es útil para mostrar cómo completar una lista desplegable con datos JSON:

http://mikesknowledgebase.com/pages/Services/WebServices-Page8.htm

¡¡Uf !!

Espero que esto ayude.


18
2018-03-07 11:51



Después de ver algunas soluciones, esto funcionó para mí.

Tengo una lista desplegable con algunos valores y quiero seleccionar el mismo valor de otra lista desplegable ... Así que primero puse una variable selectIndex de mi primer menú desplegable.

var indiceDatos = $('#myidddl')[0].selectedIndex;

Luego, selecciono ese índice en mi segunda lista desplegable.

$('#myidddl2')[0].selectedIndex = indiceDatos;

Nota:

Supongo que esta es la solución más corta, confiable, general y elegante.

Porque en mi caso, estoy usando el atributo de datos de la opción seleccionada en lugar del atributo de valor. Entonces, si no tiene un valor único para cada opción, ¡el método anterior es el más corto y dulce!


18
2018-05-17 17:24



Sé que esta es una pregunta antigua y las soluciones anteriores funcionan bien, excepto en algunos casos.

Me gusta

<select id="select_selector">
<option value="1">Item1</option>
<option value="2">Item2</option>
<option value="3">Item3</option>
<option value="4" selected="selected">Item4</option>
<option value="5">Item5</option>
</select>

Entonces, el Elemento 4 se mostrará como "Seleccionado" en el navegador y ahora desea cambiar el valor como 3 y mostrar "Artículo3" como seleccionado en lugar de Artículo4.Así, según las soluciones anteriores, si usa

jQuery("#select_selector").val(3);

Verá ese ítem 3 como seleccionado en el navegador. Pero cuando procesa los datos en php o asp, encontrará el valor seleccionado como "4". La razón es que su html se verá así.

<select id="select_selector">
<option value="1">Item1</option>
<option value="2">Item2</option>
<option value="3" selected="selected">Item3</option>
<option value="4" selected="selected">Item4</option>
<option value="5">Item5</option>
</select>

y obtiene el último valor como "4" en el idioma secundario del servidor.

ASÍ QUE MI SOLUCIÓN FINAL AL ​​RESPECTO

newselectedIndex = 3;
jQuery("#select_selector option:selected").removeAttr("selected");
jQuery("#select_selector option[value='"+newselectedIndex +"']").attr('selected', 'selected');  

EDITAR: Agregue comillas simples alrededor de "+ newselectedIndex +" para que la misma funcionalidad pueda usarse para valores no numéricos.

Entonces, lo que hago es, en realidad, eliminar el atributo seleccionado y luego hacer el nuevo como seleccionado.

Agradecería los comentarios sobre esto de los programadores senior como @strager, @ y0mbo, @ISIK y otros


12
2018-02-11 07:52