javascript - onupdate - picklist html




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

Eu tenho um formulário de entrada que me permite selecionar várias opções e fazer algo 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 é alterada .

Eu quero acionar doSomething() quando o usuário seleciona 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 acionar uma função em cada seleção pelo 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.


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

Crie um menu suspenso com div convencional, botão, mostrar / ocultar menu. Link: https://www.w3schools.com/howto/howto_js_dropdown.asp

Poderia ter sido evitado se alguém tivesse sido capaz de adicionar ouvintes de eventos a opções. Se houvesse um ouvinte onSelect para o elemento select. E se clicar no campo de seleção não disparou agravantemente o mousedown, o mouseup e o clique ao mesmo tempo no mousedown.


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

Apenas uma ideia, mas é possível colocar um onclick em cada um dos elementos <option> ?

<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 fora do select. Nesse ponto, você pode determinar qual opção foi selecionada. Para que isso aconteça na hora correta, o onclick da opção pode borrar o campo (faça outra coisa ativa ou apenas .blur () no jQuery).


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 Up / Down do teclado quando a seleção está focalizada.


Então, meu objetivo era poder selecionar o mesmo valor várias vezes, o que essencialmente substitui a função onchange () e a transforma em um método onclick () útil.

Com base nas sugestões acima, descobri o 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/


Eu descobri essa solução.

defina o selectedIndex do elemento select para 0 inicialmente

//set selected Index to 0

doSomethingOnChange(){

     blah ..blah ..

     set selected Index to 0

}

chamar esse método no evento Change


Eu tinha enfrentado uma necessidade semelhante e acabei escrevendo uma diretiva angularjs para o mesmo -

link guthub - selecione angular

element[0].blur(); usado element[0].blur(); para remover o foco da tag de seleção. A lógica é acionar esse desfoque no segundo clique da lista suspensa.

as-select é acionado mesmo quando o usuário seleciona o mesmo valor na lista suspensa.

DEMO - link


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

Se você deseja fazer algo quando o usuário simplesmente clica, em vez de alterar, basta substituir a change por click .

Eu atribuí minha lista suspensa a um ID, 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();
    });
});

Eu vi que este não tinha uma resposta selecionada, então pensei em dar minha opinião. Isso funcionou muito bem para mim, então espero que alguém possa usar esse código quando ficarem presos.

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

Edit: Use o seletor no lugar de .live . Veja jQuery .on ()


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

Eu decidi fazer algo simples do que hackear alternativas para onChange() usando outros eventos que não foram realmente feitos para esse propósito ( blur , click , etc.)

A maneira que eu resolvi isso:

Basta pré-pendurar uma tag de opção de espaço reservado, como selecionar, que não tem valor para ela.

Então, ao invés de apenas usar a seguinte estrutura, que requer alternativas hack-y:

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

Considere usar isso:

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

Assim, desta forma, seu código é muito mais simplificado e o onChange funcionará como esperado, toda vez que o usuário decidir selecionar algo diferente do valor padrão. Você poderia até adicionar o atributo disabled à primeira opção se você não quiser que eles o selecionem novamente e forçá-los a selecionar algo das opções, desencadeando assim um fire onChange() .

No momento desta resposta, estou escrevendo um aplicativo Vue complexo e descobri que essa escolha de design simplificou muito o meu código. Passei horas com esse problema antes de me estabelecer com essa solução e não precisei reescrever muito do meu código. No entanto, se eu fosse com as alternativas hacky, eu teria que levar em conta os casos de borda, para evitar o duplo disparo de solicitações de ajax, etc. Isso também não atrapalha o comportamento do navegador padrão como um bônus agradável navegadores também).

Às vezes, você só precisa dar um passo para trás e pensar sobre o quadro geral para a solução mais simples.


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. Você pode ter que usar uma combinação de onChange e onClick para obter o comportamento que está procurando.


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, em outras palavras, quando você seleciona a mesma opção


Para disparar corretamente um evento toda vez que o usuário seleciona algo (até mesmo a mesma opção), você só precisa enganar a caixa de seleção.

Como outros disseram, especifique um selectedIndex negativo em foco para forçar o evento de alteração. Embora isso permita que você engane a caixa de seleção, ela não funcionará depois disso, contanto que ainda tenha foco. A soluçã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 .


Primeiro de tudo u use onChange como um manipulador de eventos e, em seguida, use a variável flag para fazer a função que você quer toda vez que você fizer uma mudança

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


Que tal mudar o valor da seleção 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('');
    }
});

Tente isto (evento acionado exatamente quando você seleciona a opção, sem opção de mudança):

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

http://jsbin.com/dowoloka/4


Tente isto:

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


use jquery:

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

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

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

<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 este retorno com um switch ou qualquer coisa que você quiser.







dom-events