Existe um evento onSelect ou equivalente para HTML <select>?

Eu tenho um formulário de entrada que permite selecionar entre várias opções e fazer alguma coisa quando o usuário altera a seleção. Por exemplo,

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

Agora, doSomething()só é acionado quando a seleção muda .

Quero acionar doSomething()quando o usuário selecionar qualquer opção, possivelmente a mesma novamente.

Eu tentei usar um manipulador "onClick", mas isso é acionado antes que o usuário inicie o processo de seleção.

Então, existe uma maneira de disparar uma função em cada seleção do usuário?

Atualizar:

A resposta sugerida por Darryl parecia funcionar, mas não funciona de forma consistente. Às vezes, o evento é acionado assim que o usuário clica no menu suspenso, mesmo antes de o usuário concluir o processo de seleção!

Aqui está a maneira mais simples:

<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 com a seleção do mouse quanto com as teclas Para cima / Para baixo do teclado, quando a seleção é focada.

Eu precisava de algo exatamente igual. Isto é o que funcionou para mim:

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

Suporta isso:

quando o usuário seleciona qualquer opção, possivelmente a mesma novamente

Eu tive o mesmo problema ao criar um design há alguns meses. A solução que encontrei foi usar .live("change", function())em combinação com.blur() o elemento que você está usando.

Se você quiser fazer algo quando o usuário simplesmente clicar, em vez de mudar, basta substituir change porclick .

Atribuí um ID ao meu menu suspenso, selected e usei o seguinte:

$(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 este não tinha uma resposta selecionada, então achei que daria minha opinião. Isso funcionou muito bem para mim, por isso espero que outra pessoa possa usar esse código quando ficar presa.

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

Editar: use o onseletor ao contrário de .live. Veja jQuery .on ()

Apenas uma idéia, mas é possível colocar um clique em cada um dos <option>elementos?

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

Outra opção poderia ser usar onblur no select. Isso será acionado sempre que o usuário clicar longe da seleção. Nesse ponto, você pode determinar qual opção foi selecionada. Para que isso seja acionado no momento correto, o clique das opções poderá desfocar o campo (tornar outra coisa ativa ou apenas .blur () no jQuery).

A abordagem onclick não é totalmente ruim, mas, como dito, não será acionada quando o valor não for alterado com um clique do mouse.
No entanto, é possível disparar o evento onclick no 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>

Vai expandir a resposta de jitbit. Achei estranho quando você clicou no menu suspenso e depois no menu suspenso sem selecionar nada. Terminou com algo como:

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>

Isso faz um pouco mais de sentido para o usuário e permite que o JavaScript seja executado toda vez que ele seleciona qualquer opção, incluindo uma opção anterior.

A desvantagem dessa abordagem é que ela quebra a capacidade de tabular em uma lista suspensa e use as teclas de seta para selecionar o valor. Isso foi aceitável para mim, pois todos os usuários clicam em tudo o tempo todo até o fim da eternidade.

Se você realmente precisar que isso funcione assim, eu faria isso (para garantir que funcione por teclado e mouse)

• Adicione um manipulador de eventos onfocus ao select para definir o valor "atual"
• Adicione um manipulador de eventos onclick ao select para manipular as alterações do mouse
• Adicione um manipulador de eventos onkeypress ao select para lidar com as alterações do teclado

Infelizmente, o onclick será executado várias vezes (por exemplo, ao ativar o select ... e ao selecionar / fechar) e o onkeypress poderá disparar quando nada mudar ...

<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 corretamente um evento toda vez que o usuário seleciona algo (mesmo a mesma opção), basta enganar a caixa de seleção.

Como outros já disseram, especifique um valor negativo. selectedIndex foco para forçar o evento de mudança. Embora isso permita que você engane a caixa de seleção, ela não funcionará depois disso, desde que ainda tenha foco. A correção simples é forçar a caixa de seleção a desfocar, mostrada abaixo.

JS / HTML padrão:

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

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

Você pode ver uma demonstração de trabalho aqui .

Na verdade, os eventos onclick NÃO serão acionados quando o usuário usar o teclado para alterar a seleção no controle de seleção. Pode ser necessário usar uma combinação de onChange e onClick para obter o comportamento que você está procurando.

Isso pode não responder diretamente à sua pergunta, mas esse problema pode ser resolvido com simples ajustes no nível do design. Entendo que isso pode não ser 100% aplicável a todos os casos de uso, mas recomendo que você pense em repensar o fluxo de usuários do seu aplicativo e se a sugestão de design a seguir pode ser implementada.

Decidi fazer algo simples do que invadir alternativas para onChange()usar outros eventos que não foram realmente feitos para esse fim ( blur,click , etc.)

A maneira que eu resolvi isso:

Simplesmente anteceda uma tag de opção de espaço reservado, como a seleção que não tem valor para ela.

Portanto, em vez de usar apenas a seguinte estrutura, que requer alternativas de hackers:

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

Considere usar isto:

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

Dessa forma, seu código é MUITO mais simplificado e onChangefuncionará conforme o esperado, toda vez que o usuário decidir selecionar algo diferente do valor padrão. Você pode até adicionar o disabledatributo à primeira opção se não desejar que ele seja selecionado novamente e forçá-lo a selecionar algo entre as opções, acionando assim umonChange() incêndio.

No momento desta resposta, estou escrevendo um aplicativo Vue complexo e descobri que essa opção de design simplificou bastante meu código. Passei horas com esse problema antes de me estabelecer com esta solução e não precisei reescrever muito do meu código. No entanto, se eu seguisse as alternativas hacky, teria que dar conta dos casos extremos, para impedir o disparo duplo de solicitações de ajax, etc. Isso também não atrapalha o comportamento padrão do navegador como um bom bônus (testado em dispositivos móveis navegadores também).

Às vezes, você só precisa dar um passo atrás e pensar no cenário geral para a solução mais simples.

O que fiz quando enfrentei um Problema semelhante é adicionei um 'onFocus' à caixa de seleção que acrescenta uma nova opção genérica ('selecione uma opção' ou algo semelhante) e a padrão como opção selecionada.

Portanto, meu objetivo era poder selecionar o mesmo valor várias vezes, que basicamente sobrescreve a função onchange () e transformá-lo em um método onclick () útil.

Com base nas sugestões acima, criei isso que funciona para mim.

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

Em primeiro lugar, você usa o onChange como manipulador de eventos e, em seguida, usa a variável flag para fazer a função que você deseja toda vez que faz uma alteração

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

Adicione uma opção extra como a primeira, como o cabeçalho de uma coluna, que será o valor padrão do botão suspenso antes de clicar nela e redefinir no final de doSomething(), portanto, ao escolher A / B / C, o evento onchange sempre dispara, quando a seleção for State, não faça nada e retorne. onclické muito instável como muitas pessoas mencionaram antes. Então, tudo o que precisamos fazer é criar um rótulo de botão inicial diferente das suas verdadeiras opções, para que o onchange funcione em qualquer opção.

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

A coisa maravilhosa sobre a tag de seleção (nesse cenário) é que ela obterá seu valor das tags de opção.

Experimentar:

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

Trabalhou decente para mim.

use jquery:

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

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

Aqui está a minha solução, completamente diferente de qualquer outra aqui. Ele usa a posição do mouse para descobrir se uma opção foi clicada em vez de clicar na caixa de seleção para abrir a lista suspensa. Utiliza a posição event.screenY, pois é a única variável confiável entre navegadores. Um evento de foco deve ser anexado primeiro para que ele possa descobrir a posição dos controles em relação à tela antes do evento de clique.

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

Aqui está o meu jsFiddle http://jsfiddle.net/sU7EV/4/

você deveria tentar usar option:selected

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

O que funciona para mim:

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

Dessa forma, onchange chama 'doSomething ()' quando a opção é alterada e onclick chama 'doSomething ()' quando o evento onchange é falso, ou seja, quando você seleciona a mesma opção

Tente isso (evento disparado exatamente quando você seleciona a opção, sem alterar a opção):

$("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>

Aqui você tem o índice retornado e, no código js, ​​você pode usar esse retorno com uma opção ou o que quiser.

Tente o seguinte:

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

Há muito tempo, mas em resposta à pergunta original, isso ajudaria? Basta colocar onClickna SELECTlinha. Em seguida, coloque o que deseja que cada um OPTIONfaça nas OPTIONlinhas. ou seja:

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

Eu havia enfrentado uma necessidade semelhante e acabei escrevendo uma diretiva angularjs para a mesma coisa -

link do guthub - seleção angular

Usado element[0].blur();para remover o foco da marca de seleção. A lógica é acionar esse desfoque no segundo clique do menu suspenso.

as-select é acionado mesmo quando o usuário seleciona o mesmo valor no menu suspenso.

DEMO - link

A única resposta verdadeira é não usar o campo de seleção (se você precisar fazer algo ao selecionar novamente a mesma resposta).

Crie um menu suspenso com o menu convencional div, button, show / hide. Link: https://www.w3schools.com/howto/howto_js_dropdown.asp

Poderia ter sido evitado se alguém pudesse adicionar ouvintes de eventos às opções. Se houvesse um ouvinte onSelect para o elemento select. E se clicar no campo de seleção não disparar de forma irreversível a ratoeira, mouseup e clicar ao mesmo tempo na ratoeira.

Há algumas coisas que você deseja fazer aqui para garantir que ele se lembre dos valores mais antigos e acione um evento onchange, mesmo que a mesma opção seja selecionada novamente.

A primeira coisa que você deseja é um evento onChange regular:

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

Para que o evento onChange seja acionado mesmo quando a mesma opção for selecionada novamente, você pode desmarcar a opção selecionada quando o menu suspenso receber foco, definindo-o como um valor inválido. Mas você também deseja armazenar o valor selecionado anteriormente para restaurá-lo, caso o usuário não selecione nenhuma nova opção:

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

O código acima permitirá que você ative a troca mesmo que o mesmo valor esteja selecionado. No entanto, se o usuário clicar fora da caixa de seleção, você deseja restaurar o valor anterior. Fazemos isso no 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);
    }
});

Observe que os manipuladores de eventos não são compatíveis com a tag OPTION no IE, com um pensamento rápido ... Eu vim com essa solução, tente e me dê seu feedback:

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

O que estou fazendo aqui, na verdade, é redefinir o índice de seleção para que o evento onchange seja acionado sempre, é verdade que você perde o item selecionado ao clicar e pode ser irritante se sua lista for longa, mas pode ajudá-lo de alguma maneira ..

que tal mudar o valor do select quando o elemento ganha foco, por exemplo (com 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('');
    }
});

Eu descobri esta solução.

defina o selectedIndex do elemento select como 0 inicialmente

//set selected Index to 0

doSomethingOnChange(){

     blah ..blah ..

     set selected Index to 0

}

chame esse método de evento onChange