HTML SELECT - Se dispara Javascript onchange evento aún cuando la opción no se cambia

tengo el siguiente marcado:HTML SELECT - Se dispara Javascript onchange evento aún cuando la opción no se cambia

<select onchange="jsFunction()"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select>

Cuando un usuario tira hacia abajo de la lista desplegable y selecciona la misma opción seleccionada anteriormente (o doesn' t cambiar la selección en absoluto), JavaScript no lo considera como un evento onchange. Por lo tanto, no se llama al jsFunction(). Pero quiero llamar al jsFunction() incluso en este caso. ¿Cómo puedo conseguir esto?

Fuente

2012-08-09 Dilip Raj Baral

Normalmente, cuando quiero este comportamiento, agrego una entrada adicional sin ningún valor que sea la predeterminada ... y en el controlador de eventos compruebe si se seleccionó, y si es así, no haga nada. – Geoffrey

@Geoffrey Yo también pensé eso. Eso nuevamente trae a colación otro problema. ¿Cómo selecciono dinámicamente (usando JavaScript) la opción deseada (entrada sin valor en este caso)? –

lo haría así:

<select onchange="jsFunction()"> 
    <option value="" disabled selected style="display:none;">Label</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select>

Si desea usted podría tener la misma etiqueta que la primera opción, que en este caso es 1. Aún mejor: poner una etiqueta allí para las opciones en la caja.

Fuente

2012-08-09 06:04:09

Y cada vez que tengo que mostrar el combobox, configuro ** selecedIndex ** en 0. ¡Perfecto para el trabajo! –

Buena solución @Simson. –

Pruebe esto. Solo agrega una opción vacía. Esto resolverá su problema.

<select onchange="jsFunction()"> 
    <option></option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select>

Fuente

2012-08-09 06:03:01

Esto creará un cuadro vacío en la parte superior, que también se puede seleccionar. No es una solución muy buena. –

que funciona para la primera opción. Cuando se selecciona otra opción y otra vez el usuario selecciona la misma opción? –

No está disparando porque el valor no ha "cambiado". Es el mismo valor. Desafortunadamente, no puede lograr el comportamiento deseado utilizando el evento change.

Puede manejar el evento blur y realizar el procesamiento que necesite cuando el usuario abandone el cuadro de selección. De esta forma, puede ejecutar el código que necesita incluso si el usuario selecciona el mismo valor.

Fuente

2012-08-09 06:09:01 Strelok

En realidad, la situación es así. Tengo una caja de la caja. Cuando se selecciona cualquier opción, oculto el compartimiento y muestro el valor del cuadro combinado como una ETIQUETA con la opción CAMBIAR. Cuando se hace clic en CAMBIAR, nuevamente muestro ese cuadro combinado. –

@RajBD, sí, no podrás hacer eso sin manejar 'blur' y hacer que dejen la selección para actualizar. Sin embargo, es un problema menor de usabilidad. Creo que sería mejor si les da una opción explícita para "cancelar", colocando un enlace "Cancelar" al lado del cuadro de selección cuando lo muestre. – Strelok

Usted tiene que agregar la opción de vacío para resolverlo,

también puedo darle un solución más, pero depende de ti que está bien para usted o no, porque la opción del usuario seleccione por defecto después de seleccionar otras opciones de JsFunction se pondrá ser llamado dos veces

<select onChange="jsFunction()" id="selectOpt"> 
    <option value="1" onclick="jsFunction()">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> 

function jsFunction(){ 
    var myselect = document.getElementById("selectOpt"); 
    alert(myselect.options[myselect.selectedIndex].value); 
}

Fuente

2012-08-09 06:36:56 gaurang171

Probé ONCLICK antes ... no funciona en todos los navegadores ... especialmente Chrome. –

utilizan la propiedad "onmouseup" con cada elemento de opción. es detallado, pero debería funcionar. También, dependiendo de lo que su función está haciendo realidad, se podría organizar cosas un poco diferente, asumiendo que el número es importante en el controlador:

<select> 
<option onmouseup="handler()" value="1">1</option> //get selected element in handler 
<option onmouseup="handler(2)" value="2">2</option> //explicitly send the value as argument 
<option onmouseup="handler(this.value)" value="3">3</option> //same as above, but using the element's value property and allowing for dynamic option value. you could also send "this.innerHTML" or "this.textContent" to the handler, making option value unnecessary 
</select>

Fuente

2013-08-28 06:10:04 eamyx

Esto funciona: Código

<select name="type" onmousedown="this.value='';" onchange="alert('Changed.');"> 
    <option value='1'>One</option> 
    <option value='2'>Two</option> 
    <option value='3'>Three</option> 
    <option value='4'>Four</option> 
    <option value='5'>Five</option> 
    <option value='6'>Six</option> 
    <option value='7'>Seven</option> 
    <option value='8'>Eight</option> 
    <option value='9'>Nine</option> 
    <option value='10'>Ten</option> 
</select>

Fuente

2013-09-29 23:42:03 Ben

Esto no funciona – smartmouse

@smartmouse funciona en la última versión de Google Chrome – Ben

JavaScript:

en el evento MouseDown: establecer el valor de la propiedad selectedIndex -1
el evento de cambio: controlar el evento

El único inconveniente es que cuando el usuario hace clic en la lista desplegable, el elemento seleccionado no aparece seleccionado

Fuente

2015-03-04 07:52:55 figolu

-2

gusta esta.

1st is "empty".

<option></option> 
    <option>01</option> 
    <option>02</option> 
    <option>03</option> 
    <option>04</option> 
    <option>05</option> 
    <option>06</option> 
    <option>07</option> 
    <option>08</option> 
    <option>09</option> 
    <option>10</option> 
    <option>11</option> 
    <option>12</option>

Fuente

2016-03-08 03:47:38

Esta no es una respuesta a la pregunta formulada, que trata sobre el comportamiento de los eventos de cambio de JavaScript. – Carpetsmoker

acaba de establecer la selectIndex del <select> etiqueta asociada a -1 como el último paso de su evento de procesamiento.

mySelect = document.getElementById("idlist"); 
mySelect.selectedIndex = -1;

Funciona siempre, eliminando el resaltado y permitiéndole seleccionar el mismo elemento (o diferente) nuevamente.

Fuente

2016-03-30 04:54:31 user6132740

HTML SELECT - Se dispara Javascript onchange evento aún cuando la opción no se cambia

Respuesta

Cuestiones relacionadas