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

213

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!

ePharaoh
fonte
1
Eu posso entender por que você pensa assim. Vou mantê-lo breve. Existem duas entradas no meu formulário. Cidade (campo de texto) e Estado (Seleção). Inicialmente, uma cidade e seu estado são exibidos. Quando o usuário seleciona um estado, um filtro de pesquisa em algum lugar amplia seu escopo para "em todo o estado" em vez de "específico da cidade".
ePharaoh
9
, não é um elemento incomum da interface do usuário. faz todo o sentido em algumas situações. exemplo anteras seria compor um e-mail em massa, então você tem um drop-down à direita com "campos especiais" você pode adicionar rapidamente para o e-mail, nome, opt out link, etc.
Brian Armstrong
2
apenas como uma observação lateral ... para eventos em linha como onclick, onchange etc., você não precisa do prefixo de protocolo "javascript:". on {event} = "doSomething ();" está bem.
23900 scunliffe
não testado: que tal o onClick, mas aplicado às tags de opção? obviamente, através de uma classe, de uma forma discreta
o desintegrador
6
@ O Desintegrador Somente o uso de eventos de clique falha ao lidar com o caso de uso em que você seleciona uma opção via teclado. (Perceba que esta é uma pergunta antiga - adicionando para futuros visitantes ...)
peteorpeter

Respostas:

85

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.

freezethrower
fonte
36
Mas isso não fará nada "quando o usuário selecionar ... o mesmo novamente", certo?
Larsh
3
Observe que o comentário de @KayZhu está apenas meio correto: a coisa certa a fazer é verificar se "selectedIndex" é maior ou igual a zero (ou maior que -1). Não há função "type ()" e "selectedIndex" nunca será undefinedassim.
Pointy 29/07
2
@TJCrowder Você está certo - não tenho certeza do que eu estava pensando quando escrevi a segunda metade. Excluí o comentário original e, com o objetivo de não confundir os outros, aqui está o comentário original (observe que a primeira metade está correta e a segunda parte está errada): Isso não funcionará conforme o esperado para a primeira opção que tem índice 0: 0 é falso em JS, portanto doSomething () não será executado. Em vez disso, useif(type(this.selectedIndex) != undefined; doSomething()
KZ 29/07
14
Esta resposta tem mais votos positivos, mas não resolve o problema! A doSomething()função não é acionada quando o usuário seleciona a opção já selecionada. Veja este plunk , onde a cor do plano de fundo muda apenas se você selecionar uma opção diferente da selecionada no momento.
skot
FWIW: Se você deseja chamar apenas doSomething()quando uma opção específica é selecionada, por exemplo "opção 3" no exemplo acima, use if (this.selectedIndex==4)pelo qual o número "4" represente o índice numérico de opções, NÃO o especificado value! (ou seja, "opção 3" é a quarta opção de <select name="ab">).
rvrvrv
66

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

Alex
fonte
4
jsfiddle.net/ecmanaut/335XK funciona em OSX Chrome 30, Safari 6, Firefox 17.
ecmanaut
2
Também funciona no Win8 IE10, Win7 IE9, Win7 IE8, WinXP IE7 e IE6. No entanto, as travessuras do Jsfiddle ou do IE forçam você a usar o fiddle.jshell.net/ecmanaut/335XK/show/light diretamente para just-the-test, no entanto - a visualização do editor falha ao carregar o jQuery usado no exemplo para facilitar a leitura. Tudo acima testado apenas com a interação do mouse; para otimizar o teclado, esse hack provavelmente precisa de trabalho adicional, pois pelo menos os IEs antigos acionam com alegria o evento de mudança antes que você tenha a chance de escolher a opção "C".
ecmanaut
3
Dica realmente ótima. me ajudou a resolver a incapacidade de selecionar a primeira opção
naoru
7
Se um valor já estiver selecionado, a tabulação causará problemas. Assim que o campo for navegado, o valor desaparecerá, o que é um comportamento inesperado do usuário. Além disso, quando você separa, você perde a seleção, mesmo que não tenha feito nada disso. Caso contrário, boas idéias.
precisa saber é o seguinte
1
Use, por exemplo, jQuery .blur () para restaurar a seleção original se for -1 no ponto de perder o foco.
mheinzerling
12

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

Cody
fonte
obrigado! .blur () ajuda. No IE7, o evento de alteração do jQuery é acionado duas vezes se não houver .blur () no código.
desenhar
7
Como isso ajuda no problema expresso na pergunta, ou seja, que nada acontece até que a seleção seja alterada ?
Larsh
2
@ LarsH já faz vários anos desde essa pergunta, não tenho certeza - eu posso ter lido a pergunta errado e confundido.
Cody
Para quem estiver olhando agora, o .live foi totalmente removido a partir de 1.9 api.jquery.com/live/#live-events-handler . Use .change como um atalho api.jquery.com/change/#change-handler
parttimeturtle
9

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

Darryl Hein
fonte
1
danado! "por que não pensei naquele" momento. Obrigado!
ePharaoh
@ Darryl Isso realmente não funcionou como o esperado. Às vezes, o evento é acionado antes mesmo de o usuário concluir a seleção. Veja a atualização que eu adicionei à pergunta.
ePharaoh
8
A colocação de manipuladores de eventos nas opções falhará em todas as versões do IE! webbugtrack.blogspot.com/2007/11/…
scunliffe
8
falha no chrome também :)
thinklinux
Trabalha no firefox.
lezsakdomi 28/01
6

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>
user1845327
fonte
5

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.

Tyler Stahlhuth
fonte
Você pode se livrar dos avisos de suporte passando em thisvez de $(this). No entanto, não consigo tirar todo o comportamento pretendido disso; ele não alerta quando seleciono novamente a mesma opção.
Noumenon
1
Nota: onchange é acionado ao adicionar opções de remoção a uma caixa de seleção via JS. Não apenas quando um usuário seleciona um item
zanderwar
@Noumenon Corrigi os erros neste caso ainda seja útil. Acho que estava testando isso no próprio aplicativo e quando o copiei, esqueci de renomear uma variável. Deve funcionar no editor e faz mais sentido agora.
Tyler Stahlhuth
4

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>
scunliffe
fonte
4

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 .

Jim Buck
fonte
Isso funciona com o Chrome, mas não com o IE9: quando clico no controle, seu texto desaparece e não é suspenso.
ChrisW
O problema disso é que ele detecta a seleção atual. Se a seleção atual for B e clicar no menu suspenso, a marca de seleção será exibida ao lado de A! Mas A não está realmente selecionado, porque se eu deslizar para fora do menu e soltar o botão do mouse (abortando o menu), a seleção fica em branco. A seleção também ficará em branco se você tabular a lista suspensa, o que você poderá fazer facilmente se estiver tabulando em alguma outra parte do formulário, sem esperar causar nenhum dano ao longo do caminho. (Guia de Imprensa no seu jsFiddle e você verá o que quero dizer.)
skot
3

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.

Brandon Montgomery
fonte
Sim, eu teria que ... mas o problema que estou enfrentando é um ortogonal à preocupação que você levanta. O evento onclick em <opção> está sendo disparado antes mesmo de o usuário concluir sua seleção, o que parece impossibilitar o uso.
ePharaoh
Eventos fogo no Chrome quando você pressionar enter depois de ter movido a seleção para um novo item
Gene Golovchinsky
3

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.

dsignr
fonte
2

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.

David Polehonski
fonte
2

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/

Sean D
fonte
2
A mesma desvantagem das outras onfocus="this.selectedIndex=-1"soluções: a seleção atual é desativada se você tabular para o componente ou se sair do menu sem selecionar nada. Pressione tab no seu violino para ver o que quero dizer. (Observe também que você obtém um valor em branco e não '-' quando faz isso. Isso selectedIndex=-1ocorre porque não o leva <option value="-1">; seria uma ligeira melhoria aqui para usar onfocus="this.selectedIndex=0". Essa é uma solução alternativa decente, mas eu não como perder a seleção atual só porque eu olhei para o menu, ou mesmo apenas com guias para ele.
skot
2

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>

Paula George
fonte
2

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;
}
Belinda
fonte
1

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.

Tzshand
fonte
1

use jquery:

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

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

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/

Aliado
fonte
1
Não funciona no Safari ou Chrome para OS X. O alerta nunca é acionado.
skot
1

você deveria tentar usar option:selected

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

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

antoniobh
fonte
Não funciona para mim no Safari ou Chrome para OS X. jsfiddle.net/drskot/wLvL4pkw
skot
1

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

WebBrother
fonte
1
<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.

Juca Duarte
fonte
0

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>
Jesús López
fonte
0

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>
ossos
fonte
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
fonte
0

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

Nithin Kumar Biliya
fonte
0

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.

Shinjitsu
fonte
0

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);
    }
});
K Vij
fonte
-1

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


fonte
-1

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('');
    }
});
Allartk
fonte
-1

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

Anand Immannavar
fonte