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

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!

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.

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

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 ()

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).

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>

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.

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>

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í .

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.

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.

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.

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/

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>

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;
}

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í.

use jquery:

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

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

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/

deberías intentar usar option:selected

$("select option:selected").click(doSomething);

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

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

<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.

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>

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>

<select name="test[]" 
onchange="if(this.selectedIndex < 1){this.options[this.selectedIndex].selected = !1}">
<option>1</option>
<option>2</option>
<option>3</option>
</select>

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

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.

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);
    }
});

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 ..

¿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('');
    }
});

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