Esiste un evento onSelect o equivalente per HTML <select>?

Ho un modulo di input che mi consente di selezionare tra più opzioni e fare qualcosa quando l'utente cambia la selezione. Per esempio,

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

Ora, doSomething()viene attivato solo quando la selezione cambia .

Voglio innescare doSomething()quando l'utente seleziona qualsiasi opzione, possibilmente la stessa di nuovo.

Ho provato a utilizzare un gestore "onClick", ma viene attivato prima che l'utente inizi il processo di selezione.

Quindi, c'è un modo per attivare una funzione su ogni selezione da parte dell'utente?

Aggiornare:

La risposta suggerita da Darryl sembrava funzionare, ma non funziona in modo coerente. A volte l'evento viene attivato non appena l'utente fa clic sul menu a discesa, anche prima che l'utente abbia terminato il processo di selezione!

Ecco il modo più semplice:

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

Funziona sia con la selezione del mouse sia con i tasti Su / Giù della tastiera quando la selezione è focalizzata.

Avevo bisogno di qualcosa esattamente uguale. Questo è ciò che ha funzionato per me:

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

Supporta questo:

quando l'utente seleziona un'opzione, possibilmente di nuovo la stessa

Ho avuto lo stesso problema quando stavo creando un design qualche mese fa. La soluzione che ho trovato è stata quella di utilizzare .live("change", function())in combinazione con .blur()l'elemento in uso.

Se desideri che faccia qualcosa quando l'utente fa semplicemente clic, invece di modificarlo, sostituiscilo changecon click.

Ho assegnato al mio menu a discesa un ID selectede utilizzato quanto segue:

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

Ho visto che questa non aveva una risposta selezionata, quindi ho pensato di dare il mio contributo. Questo ha funzionato in modo eccellente per me, quindi spero che qualcun altro possa usare questo codice quando si blocca.

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

Modifica: utilizzare il onselettore anziché .live. Vedi jQuery .on ()

Solo un'idea, ma è possibile mettere un clic su ciascuno degli <option>elementi?

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

Un'altra opzione potrebbe essere quella di utilizzare onblur sulla selezione. Questo si attiverà ogni volta che l'utente fa clic lontano dalla selezione. A questo punto è possibile determinare quale opzione è stata selezionata. Per avere questo trigger anche al momento giusto, il clic dell'opzione potrebbe offuscare il campo (rendere attivo qualcos'altro o semplicemente .blur () in jQuery).

L'approccio onclick non è del tutto negativo ma, come detto, non verrà attivato quando il valore non viene modificato con un clic del mouse.
È comunque possibile attivare l'evento onclick nell'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>

Andando ad espandere la risposta di jitbit. L'ho trovato strano quando hai fatto clic sul menu a discesa e quindi fai clic sul menu a discesa senza selezionare nulla. Finì con qualcosa sulla falsariga di:

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>

Questo ha un po 'più senso per l'utente e consente l'esecuzione di JavaScript ogni volta che selezionano qualsiasi opzione inclusa un'opzione precedente.

L'aspetto negativo di questo approccio è che interrompe la possibilità di eseguire la tabulazione su un menu a discesa e utilizzare i tasti freccia per selezionare il valore. Questo è stato accettabile per me dal momento che tutti gli utenti fanno clic su tutto tutto il tempo fino alla fine dell'eternità.

Se hai davvero bisogno di questo per funzionare in questo modo, lo farei (per assicurarsi che funzioni con tastiera e mouse)

• Aggiungi un gestore di eventi onfocus alla selezione per impostare il valore "corrente"
• Aggiungi un gestore di eventi onclick alla selezione per gestire le modifiche del mouse
• Aggiungi un gestore eventi onkeypress alla selezione per gestire le modifiche alla tastiera

Sfortunatamente il clic verrà eseguito più volte (ad es. All'apertura della selezione ... e alla selezione / chiusura) e l'onkeypress potrebbe attivarsi quando non cambia nulla ...

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

Per generare correttamente un evento ogni volta che l'utente seleziona qualcosa (anche la stessa opzione), devi solo ingannare la casella di selezione.

Come altri hanno già detto, specifica un selectedIndexfocus negativo per forzare l'evento change. Sebbene ciò ti permetta di ingannare la casella di selezione, non funzionerà dopo che sarà ancora attivo. La semplice soluzione è forzare la sfocatura della casella di selezione, mostrata di seguito.

JS / HTML standard:

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

Puoi vedere una demo funzionante qui .

In realtà, gli eventi onclick NON verranno attivati ​​quando l'utente utilizza la tastiera per modificare la selezione nel controllo di selezione. Potrebbe essere necessario utilizzare una combinazione di onChange e onClick per ottenere il comportamento che stai cercando.

Questo potrebbe non rispondere direttamente alla tua domanda, ma questo problema potrebbe essere risolto con semplici regolazioni del livello di progettazione. Capisco che questo potrebbe non essere applicabile al 100% a tutti i casi d'uso, ma ti consiglio vivamente di considerare di ripensare il flusso di utenti dell'applicazione e se è possibile implementare il seguente suggerimento di progettazione.

Ho deciso di fare qualcosa di semplice che l'hacking alternative per onChange()utilizzare altri eventi che non erano in realtà destinati a questo scopo ( blur, click, etc.)

Il modo in cui l'ho risolto:

Pre-pendi semplicemente un tag opzione segnaposto come select che non ha alcun valore.

Quindi, invece di utilizzare solo la seguente struttura, che richiede alternative hack-y:

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

Prendi in considerazione l'utilizzo di questo:

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

Quindi, in questo modo, il tuo codice è MOLTO più semplificato e onChangefunzionerà come previsto, ogni volta che l'utente decide di selezionare qualcosa di diverso dal valore predefinito. Potresti anche aggiungere l' disabledattributo alla prima opzione se non vuoi che lo selezionino di nuovo e costringerli a selezionare qualcosa dalle opzioni, innescando così un onChange()incendio.

Al momento di questa risposta, sto scrivendo una complessa applicazione Vue e ho scoperto che questa scelta progettuale ha semplificato molto il mio codice. Ho trascorso ore su questo problema prima di decidere con questa soluzione e non ho dovuto riscrivere molto del mio codice. Tuttavia, se fossi andato con le alternative hacky, avrei dovuto tenere conto dei casi limite, per evitare il doppio licenziamento delle richieste Ajax, ecc. Ciò non confonde il comportamento predefinito del browser come un bel bonus (testato su dispositivo mobile anche i browser).

A volte, devi solo fare un passo indietro e pensare al quadro generale per la soluzione più semplice.

Quello che ho fatto di fronte a un problema simile è che ho aggiunto un "onFocus" alla casella di selezione che aggiunge una nuova opzione generica ("seleziona un'opzione" o qualcosa di simile) e la imposta come opzione selezionata.

Quindi il mio obiettivo era quello di essere in grado di selezionare lo stesso valore più volte che essenzialmente sovrascrive la funzione onchange () e lo trasforma in un utile metodo onclick ().

Sulla base dei suggerimenti di cui sopra, ho pensato a questo che funziona per me.

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

prima di tutto usi onChange come gestore di eventi e poi usa la variabile flag per farlo fare la funzione che vuoi ogni volta che fai una modifica

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

Aggiungi un'opzione aggiuntiva come prima, come l'intestazione di una colonna, che sarà il valore predefinito del pulsante a discesa prima di fare clic su di esso e reimpostare alla fine di doSomething(), quindi quando scegli A / B / C, l'evento onchange si attiva sempre, quando la selezione è State, non fare nulla e tornare. onclickè molto instabile come molte persone menzionate prima. Quindi tutto ciò che dobbiamo fare è creare un'etichetta del pulsante iniziale diversa dalle tue vere opzioni in modo che onchange funzioni su qualsiasi opzione.

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

La cosa meravigliosa del tag select (in questo scenario) è che prenderà il suo valore dai tag option.

Provare:

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

Ha funzionato decente per me.

usa jquery:

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

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

Ecco la mia soluzione, completamente diversa da qualsiasi altra qui. Utilizza la posizione del mouse per capire se è stata selezionata un'opzione anziché fare clic sulla casella di selezione per aprire il menu a discesa. Si avvale della posizione event.screenY in quanto questa è l'unica variabile affidabile tra browser. Un evento al passaggio del mouse deve essere collegato per primo in modo da poter capire la posizione dei controlli rispetto allo schermo prima dell'evento 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");
});

Ecco il mio jsFiddle http://jsfiddle.net/sU7EV/4/

dovresti provare a usare option:selected

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

Cosa funziona per me:

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

In questo modo, onchange chiama 'doSomething ()' quando l'opzione cambia e onclick chiama 'doSomething ()' quando l'evento onchange è falso, in altre parole, quando selezioni la stessa opzione

Prova questo (evento attivato esattamente quando selezioni l'opzione, senza cambiare opzione):

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

Qui hai restituito l'indice e nel codice js puoi usare questo ritorno con un interruttore o qualsiasi cosa tu voglia.

Prova questo:

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

Tanto tempo fa, ma in risposta alla domanda originale, questo sarebbe d'aiuto? Metti onClickin SELECTlinea. Quindi metti OPTIONin OPTIONriga ciò che vuoi che facciano ciascuno . vale a dire:

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

Avevo affrontato un'esigenza simile e ho finito per scrivere una direttiva angularjs per lo stesso -

collegamento guthub - selezione angolare

Utilizzato element[0].blur();per rimuovere lo stato attivo dal tag select. La logica è attivare questa sfocatura al secondo clic del menu a discesa.

as-select viene attivato anche quando l'utente seleziona lo stesso valore nel menu a discesa.

DEMO - link

L'unica vera risposta è di non utilizzare il campo di selezione (se è necessario fare qualcosa quando si seleziona nuovamente la stessa risposta).

Crea un menu a discesa con div, pulsante, menu mostra / nascondi convenzionali. Link: https://www.w3schools.com/howto/howto_js_dropdown.asp

Avrebbe potuto essere evitato se si fosse riusciti ad aggiungere listener di eventi alle opzioni. Se fosse stato presente un listener onSelect per l'elemento select. E se facendo clic sul campo di selezione non si attiva in modo aggravante il mouse, fare il mouse e fare clic contemporaneamente su il mouse.

Ci sono alcune cose che vuoi fare qui per assicurarti che ricordi i valori più vecchi e inneschi un evento onchange anche se la stessa opzione è selezionata di nuovo.

La prima cosa che vuoi è un normale evento onChange:

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

Per attivare l'attivazione dell'evento onChange anche quando viene nuovamente selezionata la stessa opzione, è possibile annullare l'impostazione dell'opzione selezionata quando il menu a discesa riceve lo stato attivo impostandolo su un valore non valido. Ma vuoi anche memorizzare il valore precedentemente selezionato per ripristinarlo nel caso in cui l'utente non selezioni alcuna nuova opzione:

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

Il codice sopra ti consentirà di attivare il cambio anche se è selezionato lo stesso valore. Tuttavia, se l'utente fa clic all'esterno della casella di selezione, si desidera ripristinare il valore precedente. Lo facciamo su 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);
    }
});

Si prega di notare che i gestori di eventi non sono supportati per il tag OPTION su IE, con un pensiero veloce .. Ho trovato questa soluzione, provalo e dammi il tuo 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>

Quello che sto facendo qui in realtà è reimpostare l'indice di selezione in modo che l'evento onchange venga sempre attivato, vero che perdiamo l'elemento selezionato quando fai clic e forse è fastidioso se l'elenco è lungo, ma può aiutarti in qualche modo ..

che dire di cambiare il valore della selezione quando l'elemento diventa attivo, ad es. (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('');
    }
});

Ho scoperto questa soluzione.

imposta inizialmente SelectedIndex dell'elemento select su 0

//set selected Index to 0

doSomethingOnChange(){

     blah ..blah ..

     set selected Index to 0

}

chiama questo metodo onChange event