javascript - dynamically - Cambie el valor seleccionado de una lista desplegable con jQuery

option selected val jquery

Question

Tengo una lista desplegable con valores conocidos. Lo que estoy tratando de hacer es establecer la lista desplegable en un valor particular que sé que existe utilizando 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, tengo que hacer esto con jQuery, porque estoy usando una clase CSS para mi selector ( ASP.NET cliente ASP.NET estúpido ...).

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 resulta que, la primera vez lo tuve bien con:

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

Cuando pongo una alerta justo arriba, funciona bien, pero cuando elimino la alerta y la dejo correr a toda velocidad, recibo el error.

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

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

Answer 1

Así que lo cambié para que ahora se ejecute después de 300 milisegundos usando setTimeout. Parece estar trabajando ahora.

Me he encontrado con esto muchas veces al cargar datos de una llamada Ajax. Yo también uso .NET, y lleva tiempo ajustarse a clientId cuando se usa el selector jQuery. Para corregir el problema que está teniendo y para evitar tener que agregar una propiedad setTimeout , simplemente puede poner " async: false " en la llamada Ajax, y le dará al DOM el tiempo suficiente para recuperar los objetos que está agregando. a la selección. Una pequeña muestra a continuación:

$.ajax({
type: "POST",
url: document.URL + ''/PageList'',
data: "{}",
async: false,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var pages = (typeof response.d) == ''string'' ? eval(''('' + response.d + '')'') : response.d;
$(''#locPage'' + locId).find(''option'').remove();
$.each(pages, function () {
$(''#locPage'' + locId).append(
$(''<option></option>'').val(this.PageId).html(this.Name)
);
});
}
});

Answer 2

¿Cómo está cargando los valores en la lista desplegable o determinando qué valor seleccionar? Si está haciendo esto usando Ajax, entonces la razón por la que necesita el retraso antes de que se realice la selección podría ser porque los valores no se cargaron en el momento en que se ejecutó la línea en cuestión. Esto también explicaría por qué funcionó cuando colocó una declaración de alerta en la línea antes de establecer el estado, ya que la acción de alerta generaría un retraso suficiente para que los datos se carguen.

Si está utilizando uno de los métodos Ajax de jQuery, puede especificar una función de devolución de llamada y luego poner $("._statusDDL").val(2); en su función de devolución de llamada.

Esta sería una forma más confiable de manejar el problema, ya que podría estar seguro de que el método se ejecutó cuando los datos estaban listos, incluso si tomara más de 300 ms.

Answer 3

Con el campo oculto necesitas usar así:

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

o

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

Answer 4

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 ... Entonces, primero puse en una variable el 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.

Answer 5

En mi caso pude hacerlo funcionar usando el método .attr ().

$("._statusDDL").attr("selected", "");

Answer 6

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

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

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

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

Para establecer el índice seleccionado de una lista desplegable, usaría esto:

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

Tenga en cuenta que la función prop () requiere JQuery v1.6 o posterior.

Veamos cómo usarías estas dos funciones.

Suponiendo que tuviera 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 seleccionado actualmente, 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 rellenar una lista desplegable con datos JSON:

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

¡¡Uf !!

Espero que esto ayude.

Answer 7

Otra opción es configurar el control param ClientID = "Static" en .net y luego puede acceder al objeto en JQuery por la ID que estableció.

Answer 8

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>

Por lo tanto, el elemento 4 se mostrará como "Seleccionado" en el navegador y ahora desea cambiar el valor como 3 y mostrar "Elemento 3" como seleccionado en lugar de Item4.So según las soluciones anteriores, si usa

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

Verá ese Elemento 3 tal como se seleccionó 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 lenguaje del lado del servidor.

Así que mi solución final en este sentido

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 se pueda usar la misma funcionalidad para valores no numéricos.

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

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

Answer 9

Si tenemos un menú desplegable con un título de "Clasificación de datos":

<select title="Data Classification">
<option value="Top Secret">Top Secret</option>
<option value="Secret">Secret</option>
<option value="Confidential">Confidential</option>
</select>

Podemos convertirlo en una variable:

var dataClsField = $(''select[title="Data Classification"]'');

Luego ponga en otra variable el valor que queremos que tenga el menú desplegable:

var myValue = "Top Secret"; // this would have been "2" in your example

Luego podemos usar el campo que dataClsField en dataClsField , hacer una búsqueda para myValue y hacer que se seleccione usando .prop() :

dataClsField.find(''option[value="''+ myValue +''"]'').prop(''selected'', ''selected'');

O, simplemente puede usar .val() , pero su selector de . solo se puede usar si coincide con una clase en el menú desplegable, y debe usar comillas sobre el valor dentro del paréntesis, o simplemente use la variable que establecimos anteriormente:

dataClsField.val(myValue);

Answer 10

Solo intenta con

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

y no con

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

Answer 11

Solo un FYI, no necesita usar clases 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 representará el ID de control correctamente dentro de jQuery.

Answer 12

Solo una nota: he estado utilizando selectores de comodín en jQuery para capturar elementos que están ofuscados por las identificaciones de clientes de ASP.NET. Esto también podría ayudarlo:

<asp:DropDownList id="MyDropDown" runat="server" />
$("[id* = ''MyDropDown'']").append("<option value=''-1''>&nbsp;</option>"); //etc

Tenga en cuenta el id * comodín: esto encontrará su elemento incluso si el nombre es "ctl00 $ ctl00 $ ContentPlaceHolder1 $ ContentPlaceHolder1 $ MyDropDown"

Answer 13

Utilizo una función de extensión para obtener los identificadores de los clientes, así:

$.extend({
clientID: function(id) {
return $("[id$=''" + id + "'']");
}
});

Entonces puedes llamar controles de ASP.NET en jQuery de esta manera:

$.clientID("_statusDDL")

Answer 14

La documentación de jQuery establece:

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

Este comportamiento está en las versiones de jQuery 1.2 y superiores.

Lo más probable es que quieras esto:

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

Answer 15

<asp:DropDownList ID="DropUserType" ClientIDMode="Static" runat="server">
<asp:ListItem Value="1" Text="aaa"></asp:ListItem>
<asp:ListItem Value="2" Text="bbb"></asp:ListItem>
</asp:DropDownList>

ClientIDMode = "Static"

$(''#DropUserType'').val(''1'');

Answer 16

<asp:DropDownList id="MyDropDown" runat="server" />

Use $("select[name$=''MyDropDown'']").val() .