¿Hay un evento onSelect o equivalente para HTML <select>?

213

Tengo un formulario de entrada que me permite seleccionar entre varias opciones y hacer algo cuando el usuario cambia la selección. P.ej,

<select onChange="javascript:doSomething();">
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

Ahora, doSomething()solo se activa cuando la selección cambia .

Quiero activar doSomething()cuando el usuario selecciona cualquier opción, posiblemente la misma nuevamente.

He intentado usar un controlador "onClick", pero se activa antes de que el usuario comience el proceso de selección.

Entonces, ¿hay alguna manera de activar una función en cada selección del usuario?

Actualizar:

La respuesta sugerida por Darryl parecía funcionar, pero no funciona de manera consistente. A veces, el evento se activa tan pronto como el usuario hace clic en el menú desplegable, ¡incluso antes de que el usuario haya terminado el proceso de selección!

ePharaoh
fuente
1
Puedo entender por qué piensas eso. Lo mantendré breve. Hay dos entradas en mi formulario. Ciudad (campo de texto) y Estado (Selección). Inicialmente, se muestra una ciudad y su estado. Cuando el usuario selecciona un estado, un filtro de búsqueda en algún lugar amplía su alcance a "Todo el estado" en lugar de "Específico de la ciudad".
ePharaoh
99
extraño, no es un elemento de interfaz de usuario poco común. Tiene mucho sentido en algunas situaciones. ejemplo de anteras se componía de un correo electrónico masivo, entonces usted tiene una caída hacia abajo a la derecha con "campos especiales" puede agregar rápidamente en el correo electrónico, nombre, enlace de cancelación, etc.
Brian Armstrong
2
solo como nota al margen ... para eventos en línea como onclick, onchange, etc., no necesita el prefijo de protocolo "javascript:". on {event} = "doSomething ();" está bien
scunliffe
no probado: ¿qué tal onClick pero aplicado a las etiquetas de opción? obviamente a través de una clase, de una manera discreta
The Disintegrator
66
@El Desintegrador Solo el uso de eventos de clic no puede manejar el caso de uso donde selecciona una opción a través del teclado. (Darse cuenta de esto es una antigua pregunta - la adición de futuros visitantes ...)
peteorpeter

Respuestas:

85

Aquí está la forma más simple:

<select name="ab" onchange="if (this.selectedIndex) doSomething();">
    <option value="-1">--</option>
    <option value="1">option 1</option> 
    <option value="2">option 2</option>
    <option value="3">option 3</option>
</select>

Funciona tanto con la selección del mouse como con las teclas arriba / abajo del teclado cuando la selección está enfocada.

congelador
fuente
36
Pero esto no hará nada "cuando el usuario seleccione ... el mismo de nuevo", ¿verdad?
LarsH
3
Tenga en cuenta que el comentario de @KayZhu es solo medio correcto: lo correcto es verificar que "selectedIndex" sea mayor o igual que cero (o mayor que -1). No hay una función "type ()", y "selectedIndex" nunca lo será de undefinedtodos modos.
Puntiagudo
2
@TJCrowder Tienes razón, no estoy seguro de lo que estaba pensando cuando escribí la segunda mitad. He eliminado el comentario original y con el fin de no confundir a los demás, aquí está el comentario original (tenga en cuenta que la primera mitad es correcta y la segunda parte es incorrecta): esto no funcionará como se esperaba para la primera opción que tiene índice 0: 0 es falso en JS, por lo tanto, doSomething () no se ejecutará. En su lugar, useif(type(this.selectedIndex) != undefined; doSomething()
KZ
14
¡Esta respuesta tiene la mayoría de los votos positivos, pero no aborda el problema! La doSomething()función no se activa cuando el usuario selecciona la opción ya seleccionada. Vea este plunk , donde el color de fondo solo cambia si selecciona una opción diferente a la seleccionada actualmente.
skot
FWIW: Si solo desea invocar doSomething()cuando se selecciona una opción específica, por ejemplo, "opción 3" en el ejemplo anterior, use if (this.selectedIndex==4)donde el número "4" representa el índice numérico de opciones, ¡NO el especificado value! (es decir, "opción 3" es la cuarta opción de <select name="ab">).
rvrvrv
66

Necesitaba algo exactamente igual. Esto es lo que funcionó para mí:

<select onchange="doSomething();" onfocus="this.selectedIndex = -1;">
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

Soporta esto:

cuando el usuario selecciona cualquier opción, posiblemente la misma otra vez

Alex
fuente
44
jsfiddle.net/ecmanaut/335XK funciona en osx Chrome 30, Safari 6, Firefox 17.
ecmanaut
2
También funciona en Win8 IE10, Win7 IE9, Win7 IE8, WinXP IE7 e IE6. Sin embargo, las travesuras de Jsfiddle o IE lo obligan a usar fiddle.jshell.net/ecmanaut/335XK/show/light directamente para just-the-test, sin embargo, su vista del editor no puede cargar jQuery utilizado en el ejemplo para facilitar la lectura. Todo lo anterior solo probado con la interacción del mouse; para que este teclado sea compatible con este truco probablemente necesite trabajo adicional, ya que al menos los viejos IE desencadenan felizmente el evento de cambio antes de tener la oportunidad de elegir la opción "C".
ecmanaut
3
Muy buen consejo. me ayudó a resolver la imposibilidad de seleccionar la primera opción
naoru
77
Si ya se ha seleccionado un valor, entonces tabularlo causará problemas. Tan pronto como se navega por el campo, el valor desaparecerá, lo cual es un comportamiento del usuario bastante inesperado. Además, cuando separe, habrá perdido la selección, aunque no haya hecho nada por el estilo. De lo contrario, buenas ideas.
KyleMit
1
Utilice, por ejemplo, jQuery .blur () para restaurar la selección original si es -1 en el punto de perder el foco.
mheinzerling
12

Tuve el mismo problema cuando estaba creando un diseño hace unos meses. La solución que encontré fue usar .live("change", function())en combinación con .blur()el elemento que está usando.

Si desea que haga algo cuando el usuario simplemente hace clic, en lugar de cambiar, simplemente reemplace changecon click.

Le asigné un ID a mi menú desplegable selectedy utilicé lo siguiente:

$(function () {
    $("#selected").live("change", function () {

    // do whatever you need to do

    // you want the element to lose focus immediately
    // this is key to get this working.
    $('#selected').blur();
    });
});

Vi que esta no tenía una respuesta seleccionada, así que pensé que daría mi opinión. Esto funcionó excelentemente para mí, así que espero que alguien más pueda usar este código cuando se atasque.

http://api.jquery.com/live/

Editar: use el onselector en lugar de .live. Ver jQuery .on ()

Cody
fuente
¡Gracias! .blur () ayuda. En IE7, el evento de cambio de jQuery se activa dos veces si no hay .blur () en el código.
sorteo del
77
¿Cómo ayuda esto con el problema expresado en la pregunta, es decir, que no pasa nada hasta que se cambia la selección ?
LarsH
2
@LarsH Han pasado varios años desde esta pregunta, no estoy seguro: es posible que haya leído la pregunta mal y me haya confundido.
Cody
Para cualquiera que esté mirando ahora, .live se ha eliminado por completo desde 1.9 api.jquery.com/live/#live-events-handler . Use .change como acceso directo api.jquery.com/change/#change-handler
parttimeturtle
9

Solo una idea, pero ¿es posible poner un clic en cada uno de los <option>elementos?

<select>
  <option onclick="doSomething(this);">A</option>
  <option onclick="doSomething(this);">B</option>
  <option onclick="doSomething(this);">C</option>
</select>

Otra opción podría ser usar onblur en la selección. Esto se activará cada vez que el usuario haga clic fuera de la selección. En este punto, podría determinar qué opción se seleccionó. Para que esto incluso se active en el momento correcto, el clic de las opciones podría desenfocar el campo (hacer que algo más esté activo o simplemente .blur () en jQuery).

Darryl Hein
fuente
1
¡maldito! "¿Por qué no pensé en ese momento?" ¡Gracias!
ePharaoh
@Darryl Esto no funcionó realmente como se esperaba. A veces, el evento se activa incluso antes de que el usuario complete la selección. Vea la actualización que agregué a la pregunta.
ePharaoh
8
¡Poner controladores de eventos en las opciones fallará en todas las versiones de IE! webbugtrack.blogspot.com/2007/11/…
scunliffe
8
falla en Chrome también :)
thinklinux
Funciona en firefox.
lezsakdomi
6

El enfoque de onclick no es del todo malo, pero como se dijo, no se activará cuando el valor no se cambie con un clic del mouse.
Sin embargo, es posible activar el evento onclick en el evento onchange.

<select onchange="{doSomething(...);if(this.options[this.selectedIndex].onclick != null){this.options[this.selectedIndex].onclick(this);}}">
    <option onclick="doSomethingElse(...);" value="A">A</option>
    <option onclick="doSomethingElse(..);" value="B">B</option>
    <option onclick="doSomethingElse(..);" value="Foo">C</option>
</select>
usuario1845327
fuente
5

Vamos a ampliar la respuesta de jitbit. Me pareció extraño cuando hiciste clic en el menú desplegable y luego hiciste clic en el menú desplegable sin seleccionar nada. Terminé con algo parecido a:

var lastSelectedOption = null;

DDChange = function(Dd) {
  //Blur after change so that clicking again without 
  //losing focus re-triggers onfocus.
  Dd.blur();

  //The rest is whatever you want in the change.
  var tcs = $("span.on_change_times");
  tcs.html(+tcs.html() + 1);
  $("span.selected_index").html(Dd.prop("selectedIndex"));
  return false;
};

DDFocus = function(Dd) {
  lastSelectedOption = Dd.prop("selectedIndex");
  Dd.prop("selectedIndex", -1);

  $("span.selected_index").html(Dd.prop("selectedIndex"));
  return false;
};

//On blur, set it back to the value before they clicked 
//away without selecting an option.
//
//This is what is typically weird for the user since they 
//might click on the dropdown to look at other options,
//realize they didn't what to change anything, and 
//click off the dropdown.
DDBlur = function(Dd) {
  if (Dd.prop("selectedIndex") === -1)
    Dd.prop("selectedIndex", lastSelectedOption);

  $("span.selected_index").html(Dd.prop("selectedIndex"));
  return false;
}; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="Dd" onchange="DDChange($(this));" onfocus="DDFocus($(this));" onblur="DDBlur($(this));">
  <option>1</option>
  <option>2</option>
</select>
<br/>
<br/>Selected index: <span class="selected_index"></span>
<br/>Times onchange triggered: <span class="on_change_times">0</span>

Esto tiene un poco más de sentido para el usuario y permite que JavaScript se ejecute cada vez que selecciona cualquier opción, incluida una opción anterior.

La desventaja de este enfoque es que rompe la capacidad de tabular en un menú desplegable y usar las teclas de flecha para seleccionar el valor. Esto fue aceptable para mí, ya que todos los usuarios hacen clic en todo todo el tiempo hasta el final de la eternidad.

Tyler Stahlhuth
fuente
Puede deshacerse de las advertencias de utilería pasando en thislugar de hacerlo $(this). Sin embargo, no obtengo todo el comportamiento previsto de esto; no alerta cuando vuelvo a seleccionar la misma opción.
Noumenon
1
Nota: onchange se activa al agregar opciones de eliminación a un cuadro de selección a través de JS. No solo cuando un usuario selecciona un elemento
zanderwar, el
@Noumenon Solucioné los errores en esto si aún es útil. Creo que estaba probando esto en la propia aplicación y cuando lo copié olvidé cambiar el nombre de una variable. Debería trabajar en el editor y tener más sentido ahora.
Tyler Stahlhuth
4

Si realmente necesita que esto funcione de esta manera, lo haría (para garantizar que funcione con el teclado y el mouse)

  • Agregue un controlador de eventos onfocus a la selección para establecer el valor "actual"
  • Agregue un controlador de eventos onclick a la selección para manejar los cambios del mouse
  • Agregue un controlador de eventos onkeypress a la selección para manejar los cambios del teclado

Desafortunadamente, el onclick se ejecutará varias veces (por ejemplo, al abrir la selección ... y al seleccionar / cerrar) y la pulsación de la tecla onkey puede activarse cuando nada cambia ...

<script>
  function setInitial(obj){
    obj._initValue = obj.value;
  }
  function doSomething(obj){
    //if you want to verify a change took place...
    if(obj._initValue == obj.value){
      //do nothing, no actual change occurred...
      //or in your case if you want to make a minor update
      doMinorUpdate();
    } else {
      //change happened
      getNewData(obj.value);
    }
  }
</script>


<select onfocus="setInitial(this);" onclick="doSomething();" onkeypress="doSomething();">
  ...
</select>
scunliffe
fuente
4

Para disparar un evento correctamente cada vez que el usuario selecciona algo (incluso la misma opción), solo necesita engañar el cuadro de selección.

Como otros han dicho, especifique un selectedIndexenfoque negativo para forzar el evento de cambio. Si bien esto le permite engañar al cuadro de selección, no funcionará después de eso, siempre y cuando todavía tenga el foco. La solución simple es forzar el desenfoque del cuadro de selección, como se muestra a continuación.

JS / HTML estándar:

<select onchange="myCallback();" onfocus="this.selectedIndex=-1;this.blur();">
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

Complemento jQuery:

<select>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

<script type="text/javascript">
    $.fn.alwaysChange = function(callback) {
        return this.each(function(){
            var elem = this;
            var $this = $(this);

            $this.change(function(){
                if(callback) callback($this.val());
            }).focus(function(){
                elem.selectedIndex = -1;
                elem.blur();
            });
        });
    }


    $('select').alwaysChange(function(val){
        // Optional change event callback,
        //    shorthand for $('select').alwaysChange().change(function(){});
    });
</script>

Puedes ver una demostración funcional aquí .

Jim Buck
fuente
Esto funciona con Chrome, pero no con IE9: cuando hago clic en el control, su texto desaparece y no se despliega.
ChrisW
El problema con esto es que destruye la selección actual. Si la selección actual es B y hago clic en el menú desplegable, la marca de verificación aparece junto a A. Pero A no está realmente seleccionado, porque si me deslizo fuera del menú y suelto el botón del mouse (abortando el menú) la selección queda en blanco. La selección también se pone en blanco si toca el menú desplegable, lo que podría hacer fácilmente si estuviera pasando a otra parte del formulario, sin esperar ningún daño en el camino. (Presione la pestaña en su jsfiddle y verá lo que quiero decir.)
skot
3

En realidad, los eventos onclick NO se activarán cuando el usuario use el teclado para cambiar la selección en el control de selección. Es posible que deba usar una combinación de onChange y onClick para obtener el comportamiento que está buscando.

Brandon Montgomery
fuente
Sí, tendría que ... pero el problema al que me enfrento es un problema ortogonal aparte de la preocupación que planteas. El evento onclick en <opción> se está activando incluso antes de que el usuario complete su selección, lo que parece imposibilitar su uso.
ePharaoh
Los incendios en Chrome si se pulsa Enter después de haber movido la selección de un nuevo elemento
Gen Golovchinsky
3

Es posible que esto no responda directamente a su pregunta, pero este problema podría resolverse mediante simples ajustes de nivel de diseño. Entiendo que esto puede no ser 100% aplicable a todos los casos de uso, pero le recomiendo que considere repensar el flujo de su aplicación por parte del usuario y si se puede implementar la siguiente sugerencia de diseño.

Decidí hacer algo simple que la piratería alternativas para onChange()el uso de otros eventos que no fueron realmente destinados para este propósito ( blur, click, etc.)

La forma en que lo resolví:

Simplemente coloque una etiqueta de opción de marcador de posición como select que no tiene valor

Entonces, en lugar de simplemente usar la siguiente estructura, que requiere alternativas de hack-y:

<select>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

Considere usar esto:

<select>
  <option selected="selected">Select...</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

Entonces, de esta manera, su código es MUCHO más simplificado y onChangefuncionará como se espera, cada vez que el usuario decida seleccionar algo que no sea el valor predeterminado. Incluso podría agregar el disabledatributo a la primera opción si no desea que lo seleccionen nuevamente y obligarlos a seleccionar algo de las opciones, lo que desencadena un onChange()incendio.

En el momento de esta respuesta, estoy escribiendo una aplicación Vue compleja y descubrí que esta elección de diseño ha simplificado mucho mi código. Pasé horas en este problema antes de establecerme con esta solución y no tuve que volver a escribir mucho de mi código. Sin embargo, si optara por las alternativas hacky, habría tenido que tener en cuenta los casos límite, para evitar la doble activación de las solicitudes de ajax, etc. Esto tampoco estropea el comportamiento predeterminado del navegador como una buena ventaja (probado en dispositivos móviles navegadores también).

A veces, solo necesita dar un paso atrás y pensar en el panorama general para la solución más simple.

dsignr
fuente
2

Lo que hice cuando me enfrenté a un problema similar es que agregué un 'onFocus' al cuadro de selección que agrega una nueva opción genérica ('seleccionar una opción' o algo similar) y lo predetermina como la opción seleccionada.

David Polehonski
fuente
2

Así que mi objetivo era poder seleccionar el mismo valor varias veces, lo que esencialmente sobrescribe la función onchange () y convertirlo en un método útil onclick ().

Basado en las sugerencias anteriores, se me ocurrió esto que funciona para mí.

<select name="ab" id="hi" onchange="if (typeof(this.selectedIndex) != undefined) {alert($('#hi').val()); this.blur();}" onfocus="this.selectedIndex = -1;">
    <option value="-1">--</option>
    <option value="1">option 1</option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
</select>

http://jsfiddle.net/dR9tH/19/

Sean D
fuente
2
El mismo inconveniente que con las otras onfocus="this.selectedIndex=-1"soluciones: la selección actual se ve afectada si toca el componente o si sale del menú sin seleccionar nada. Presiona tab en tu violín para ver a qué me refiero. (También observe que obtiene un valor en blanco y no '-' cuando hace esto. Esto se debe a selectedIndex=-1que no lo consigue <option value="-1">; sería una ligera mejora aquí para usar onfocus="this.selectedIndex=0". Esta es una solución medio decente, pero no lo hago como perder la selección actual sólo porque me asomé en el menú, o incluso sólo con pestañas a la misma.
skot
2

en primer lugar, usa onChange como controlador de eventos y luego usa la variable de marca para hacer que realice la función que desea cada vez que realiza un cambio

<select

var list = document.getElementById("list");
var flag = true ; 
list.onchange = function () {
if(flag){
document.bgColor ="red";
flag = false;

}else{
document.bgColor ="green";
flag = true;
}
}
<select id="list"> 
<option>op1</option>
<option>op2</option>
<option>op3</option>
</select>

Paula George
fuente
2

Agregue una opción adicional como la primera, como el encabezado de una columna, que será el valor predeterminado del botón desplegable antes de hacer clic y restablecer al final de doSomething(), de modo que cuando elija A / B / C, el evento onchange siempre se activa, cuando la selección es State, no haga nada y regrese. onclickes muy inestable como mucha gente mencionó antes. Entonces, todo lo que tenemos que hacer es crear una etiqueta de botón inicial que sea diferente como sus opciones verdaderas para que el cambio funcione en cualquier opción.

<select id="btnState" onchange="doSomething(this)">
  <option value="State" selected="selected">State</option>  
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>


function doSomething(obj)
{
    var btnValue = obj.options[obj.selectedIndex].value;

    if (btnValue == "State")
    {
      //do nothing
      return;
    }

    // Do your thing here

    // reset 
    obj.selectedIndex = 0;
}
Belinda
fuente
1

Lo maravilloso de la etiqueta de selección (en este escenario) es que tomará su valor de las etiquetas de opción.

Tratar:

<select onChange="javascript:doSomething(this.value);">
<option value="A">A</option>
<option value="B">B</option>
<option value="Foo">C</option>
</select>

Funcionó decente para mí.

Tzshand
fuente
1

use jquery:

<select class="target">
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

<script>
    $('.target').change(function() { doSomething(); });
</script>
ladookie
fuente
1

Aquí está mi solución, completamente diferente a cualquier otra aquí. Utiliza la posición del mouse para determinar si se hizo clic en una opción en lugar de hacer clic en el cuadro de selección para abrir el menú desplegable. Utiliza la posición event.screenY ya que esta es la única variable confiable de navegador cruzado. Primero se debe adjuntar un evento de desplazamiento para que pueda determinar la posición de los controles en relación con la pantalla antes del evento de clic.

var select = $("select");

var screenDif = 0;
select.bind("hover", function (e) {
    screenDif = e.screenY - e.clientY;
});
select.bind("click", function (e) {
    var element = $(e.target);
    var eventHorizon = screenDif + element.offset().top + element.height() - $(window).scrollTop();
    if (e.screenY > eventHorizon)
        alert("option clicked");
});

Aquí está mi jsFiddle http://jsfiddle.net/sU7EV/4/

Aliado
fuente
1
No funciona en Safari o Chrome para OS X. La alerta nunca se activa.
skot
1

deberías intentar usar option:selected

$("select option:selected").click(doSomething);
Pragnesh Chauhan
fuente
1

Lo que funciona para mi:

<select id='myID' onchange='doSomething();'>
    <option value='0' selected> Select Option </option>
    <option value='1' onclick='if (!document.getElementById("myID").onchange()) doSomething();' > A </option>
    <option value='2' onclick='if (!document.getElementById("myID").onchange()) doSomething();' > B </option>
</select>

De esa manera, onchange llama a 'doSomething ()' cuando la opción cambia, y onclick llama 'doSomething ()' cuando el evento onchange es falso, en otras palabras, cuando selecciona la misma opción

antoniobh
fuente
No funciona para mí en Safari o Chrome para OS X. jsfiddle.net/drskot/wLvL4pkw
skot
1

Pruebe esto (evento activado exactamente cuando selecciona la opción, sin cambiar la opción):

$("select").mouseup(function() {
    var open = $(this).data("isopen");
    if(open) {
        alert('selected');
    }
    $(this).data("isopen", !open);
});

http://jsbin.com/dowoloka/4

WebBrother
fuente
1
<script>
function abc(selectedguy) {
alert(selectedguy);
}
</script>

<select onchange="abc(this.selectedIndex);">
<option>option one</option>
<option>option two</option>
</select>

Aquí tiene el índice devuelto, y en el código js puede usar este retorno con un interruptor o lo que desee.

Juca Duarte
fuente
0

Prueba esto:

<select id="nameSelect" onfocus="javascript:document.getElementById('nameSelect').selectedIndex=-1;" onchange="doSomething(this);">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>
Jesús López
fuente
0

Hace mucho tiempo, pero en respuesta a la pregunta original, ¿ayudaría esto? Solo ponlo onClicken la SELECTlínea. Luego ponga lo que quiere que cada uno OPTIONhaga en las OPTIONlíneas. es decir:

<SELECT name="your name" onClick>
<option value ="Kilometres" onClick="YourFunction()">Kilometres
-------
-------
</SELECT>
huesos
fuente
0
<select name="test[]" 
onchange="if(this.selectedIndex < 1){this.options[this.selectedIndex].selected = !1}">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
xicooc
fuente
0

Me enfrenté a una necesidad similar y terminé escribiendo una directiva angularjs para la misma:

enlace guthub - selección angular

Usado element[0].blur(); para eliminar el foco de la etiqueta de selección. La lógica es activar este desenfoque con el segundo clic del menú desplegable.

as-select se activa incluso cuando el usuario selecciona el mismo valor en el menú desplegable.

DEMO - enlace

Nithin Kumar Biliya
fuente
0

La única respuesta verdadera es no usar el campo de selección (si necesita hacer algo cuando vuelve a seleccionar la misma respuesta).

Cree un menú desplegable con div convencional, botón, menú mostrar / ocultar. Enlace: https://www.w3schools.com/howto/howto_js_dropdown.asp

Podría haberse evitado si uno hubiera podido agregar oyentes de eventos a las opciones. Si hubiera habido un oyente onSelect para el elemento select. Y si al hacer clic en el campo de selección no se disparó agravantemente el mousedown, mouseup, y se hizo clic al mismo tiempo en el mousedown.

Shinjitsu
fuente
0

Hay algunas cosas que desea hacer aquí para asegurarse de que recuerda los valores más antiguos y desencadena un evento de cambio, incluso si la misma opción se selecciona de nuevo.

Lo primero que quieres es un evento onChange regular:

$("#selectbox").on("change", function(){
    console.log($(this).val());
    doSomething();
});

Para que el evento onChange se active incluso cuando se vuelva a seleccionar la misma opción, puede deshabilitar la opción seleccionada cuando el menú desplegable reciba el foco configurándolo en un valor no válido. Pero también desea almacenar el valor seleccionado previamente para restaurarlo en caso de que el usuario no seleccione ninguna opción nueva:

prev_select_option = ""; //some kind of global var

$("#selectbox").on("focus", function(){
    prev_select_option = $(this).val(); //store currently selected value
    $(this).val("unknown"); //set to an invalid value
});

El código anterior le permitirá activar el cambio incluso si se selecciona el mismo valor. Sin embargo, si el usuario hace clic fuera del cuadro de selección, desea restaurar el valor anterior. Lo hacemos en onBlur:

$("#selectbox").on("blur", function(){
    if ($(this).val() == null) { 
       //because we previously set an invalid value 
       //and user did not select any option
        $(this).val(prev_select_option);
    }
});
K Vij
fuente
-1

Tenga en cuenta que los controladores de eventos no son compatibles con la etiqueta OPTION en IE, con un pensamiento rápido ... Se me ocurrió esta solución, pruébela y envíeme sus comentarios:

<script>
var flag = true;
function resetIndex(selObj) {
    if(flag) selObj.selectedIndex = -1;
    flag = true;
}
function doSomething(selObj) {
    alert(selObj.value)
    flag = false;
}
</script>
<select onchange="doSomething(this)" onclick="resetIndex(this)">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>

Lo que estoy haciendo aquí en realidad es restablecer el índice de selección para que el evento onchange se active siempre, lo cierto es que perdemos el elemento seleccionado al hacer clic y puede ser molesto si su lista es larga, pero puede ayudarlo de alguna manera ..


fuente
-1

¿Qué hay de cambiar el valor de la selección cuando el elemento gana el foco, por ejemplo (con jquery):

$("#locationtype").focus(function() {
    $("#locationtype").val('');
});

$("#locationtype").change(function() {
    if($("#locationtype").val() == 1) {
        $(".bd #mapphp").addClass('show');
        $("#invoerform").addClass('hide');
    }
    if($("#locationtype").val() == 2) {
        $(".lat").val('');
        $(".lon").val('');
    }
});
Allartk
fuente
-1

Encontré esta solución.

establecer el índice seleccionado del elemento seleccionado a 0 inicialmente

//set selected Index to 0

doSomethingOnChange(){

     blah ..blah ..

     set selected Index to 0

}

llame a este método en el evento de cambio

Anand Immannavar
fuente