change - Evento de fuego cada vez que se selecciona un elemento DropDownList con jQuery

jquery set selected option by text

Question

Tengo un menú desplegable: <asp:DropDownList id="dropdownid" runat="server" class=blah"/>

en mi jQuery, asigno un evento de cambio como este:

$(''#dropdownid'').change(function() {......});

Ahora, esto funciona cuando selecciono un valor diferente del menú desplegable, sin embargo, digamos que quiero seleccionar el mismo valor nuevamente. (porque quiero hacer otra llamada con el mismo valor) Entonces, cuando lo selecciono de nuevo, (sin cambiar el valor) simplemente haciendo clic en el valor seleccionado del menú desplegable y "seleccionándolo" de nuevo, no se desencadena ningún evento. ¿Hay algún otro evento en jquery que deba asignársele? ¿Cuál es la solución?

Answer 1

De acuerdo con la API :

El evento de cambio se dispara cuando un control pierde el foco de entrada y su valor se ha modificado desde la obtención del foco.

Es posible que desee probar el mousedown o hacer clic en eventos como alternativa.

Answer 2

El elemento seleccionado de un menú desplegable está ahí para reflejar una elección ya realizada.

Mi sugerencia es restablecer el menú desplegable a un valor predeterminado como "Seleccionar ...", cada vez que se completa una acción requerida. Por lo tanto, si el usuario necesita realizar la Acción A dos veces, el menú desplegable se restablecería después de cada acción.

1. El usuario selecciona la Acción A del menú desplegable.
2. La acción A se realiza y el menú desplegable se restablece.
3. El usuario selecciona la Acción A del menú desplegable.
4. La acción A se realiza y el menú desplegable se restablece.

Espero que esto ayude,

Rico

Answer 3

Este problema que está teniendo se debe a que el cliente maneja el HTML base seleccionado. Dado que la mayoría de los clientes no van a marcar un cambio no, tendrá que probar algo diferente.

Probablemente agregaría un botón "actualizar" o algo así, pero soy desarrollador y no diseñador, así que probablemente estoy equivocado. :)

Answer 4

Mira esta solución:
http://ledomoon.blogspot.com/2009/12/dropdown-selected-change-event-by.html

$(document).ready(function () {
    // select all the divs and make it invisible
    $("div.Content").css("display", "none");
    // Find all the combos inside the table or gridview
    $("#tblItems").find("select.Status").each(function () {
        // Attached function to the change event of each combo
        $(this).change(function () {
            if ($(this).val() == "test1") {
                // Change the visibility of the next div after the selected combo if the selected value = test1
                $(this).parent().find("div.Content").fadeIn("slow"); //css("display","block");
            } else {
                $(this).parent().find("div.Content").fadeOut("slow"); //.css("display","none");
            }
        });
    });
});

Espero que esto ayude

Answer 5

Muchas de las soluciones actuales se romperán en muchas situaciones. Cualquier solución que dependa de verificar el número de clics dos veces será muy voluble.

Algunos escenarios a considerar:

• Si hace clic en, luego se apaga y vuelve a encender, contará tanto los clics como el disparo.
• En Firefox, puede abrir el menú con un solo clic del mouse y arrastrarlo a la opción elegida sin levantar el mouse.
• Si usa una combinación de trazos de teclado, es probable que no sincronice el contador de clics o se pierda el evento de cambio por completo.
  • Puede abrir el menú desplegable con Alt + ↕ (o la barra espaciadora en Chrome y Opera).
  • Cuando el menú desplegable tiene foco, cualquiera de las teclas de flecha cambiará la selección
  • Cuando el menú desplegable está abierto, al hacer clic en Tab o en Entrar se realizará una selección

Aquí hay una extensión más completa:

La forma más robusta de ver si se seleccionó una opción es usar el evento change , que puede manejar con el manejador .change() jQuery.

Lo único que queda por hacer es determinar si el elemento original fue seleccionado nuevamente.
Esto se ha pedido mucho ( one , two , three ) sin una gran respuesta en cualquier situación.

Lo más simple sería verificar si hubo un evento de click o de keyup en la option:selected elemento option:selected PERO Chrome, IE y safari no parecen admitir eventos en elementos de option , aunque estén en el w3c recomendación

Dentro del elemento Select parece ser un cuadro negro. Si escucha eventos en él, ni siquiera puede decir en qué elemento ocurrió el evento o si la lista fue abierta o no.

La siguiente mejor opción es manejar el evento de blur . Esto indicará que el usuario se ha centrado en el menú desplegable (tal vez visto en la lista, tal vez no) y tomó la decisión de que desea mantener el valor original. Para seguir gestionando los cambios de inmediato, seguiremos suscribiéndonos al evento de change . Y para asegurarnos de que no cuente dos veces, estableceremos un indicador si el evento de cambio se activó para que no se active dos veces:

Código:

(function ($) {
    $.fn.selected = function (fn) {
        return this.each(function () {
            $(this).focus(function () {
                this.dataChanged = false;
            }).change(function () {
                this.dataChanged = true;
                fn(this);
            }).blur(function (e) {
                if (!this.dataChanged) {
                    fn(this);
                }
            });
        });
    };
})(jQuery);

Entonces llame así:

$("#dropdownid").selected(function (e) {
    alert(''You selected '' + $(e).val());
});

Ejemplo actualizado en jsFiddle

Answer 6

Para ampliar la sugerencia de Vincent Ramdhanie , eche un vistazo a hacer algo como esto. Básicamente, terminas con tu propia función jQuery que puedes reutilizar en otro lugar.

Paso 1 : crea la función jQuery

(function($) {
    $.fn.selected = function(fn) {
        return this.each(function() {
            var clicknum = 0;
            $(this).click(function() {
                clicknum++;
                if (clicknum == 2) {
                    clicknum = 0;
                    fn(this);
                }
            });
        });
    }
})(jQuery);

Paso 2 : asegúrese de que el archivo de la nueva función jQuery se referencia para su uso:

<script src="Scripts/jqDropDown.js" type="text/javascript"></script>

Paso 3 : Utiliza una nueva función:

$(''#MyDropDown'').selected(function() {
    //Do Whatever...
});

INFORMACIÓN ORIGINAL
Con su base de código actual, seleccionando el mismo valor del asp: DropDownList no activará el evento de cambio.

Podría intentar agregar otra función jQuery para el evento .blur. Esto se dispararía cuando el control pierda el foco:

$(''#dropdownid'').blur(function() {......});

Si la función de desenfoque no funciona para usted, agregaría un botón de actualización o algo para afectar que activa la función que está tratando de utilizar.

Answer 7

Para mí, la siguiente solución funcionó bien:

$("#dropdownid select").click(function() {
  alert($("#dropdownid select option:selected").html());
});

Answer 8

Prueba esto:

$(document).ready(function(){
 var clicknum = 0;
 $("#dropdownid").click(function(){
    clicknum++;
    if(clicknum == 2){
        alert($(this).val());
        clicknum = 0;
    }
 });
});

Primero está creando un clicknum variable para rastrear la cantidad de clics porque no desea que el evento se active cada vez que el usuario haga clic en el cuadro desplegable. El segundo clic es la selección que hace el usuario.

Si el número de clics es 2, se trata de un segundo clic, por lo que se iniciará el evento y se restablecerá el valor de 0 para la próxima vez. De lo contrario, no haga nada.

Answer 9

Simplemente haga clic en hacer clic en los controladores de eventos en los controles de opciones adjuntos en lugar de seleccionar:

$(''#dropdownid option'').click(function() {......});

Esto solo se activará cuando seleccione una opción del menú desplegable, independientemente de si cambia.

Answer 10

También:

$(''#dropdownid select option'').click(function() {
   ....
}