onclick sul tag opzione non funziona su IE e Chrome

Question

Sto usando onclick evento in opzione etichetta per select scatola

<select> 
    <option onclick="check()">one</option> 
    <option onclick="check()">two</option> 
    <option onclick="check()">three</option> 
</select>` 

onclick evento non funziona su IE e Chrome, ma si sta lavorando bene in Firefox, qui non voglio usare onchange evento il tag select BCZ non si innescherà un evento se l'utente seleziona stessa opzione di nuovo

esempio: dico utente seleziona prima volta "una" discesa ho aprirà un pop-up dopo l'elaborazione di un certo roba utente cl OSE il popup, supponiamo che se l'utente vuole selezionare stesso "uno" discesa non si innescherà alcun event.this possono essere risolti utilizzando onclick evento su opzione etichetta, ma la sua non funziona su IE e Chrome

C'è qualche lavoro in giro per questo?

Answer 1

onclick evento su option tag avrà esito negativo sulla maggior parte delle versioni di IE, Safari e Chrome: reference

Se si desidera attivare un evento ogni volta che l'utente seleziona, perché non utilizzare semplicemente:

<select onclick="check()"> 
<option>one</option> 
<option>two</option> 
<option>three</option> 

E se vuoi fare qualcosa con l'opzione specifica selezionata dall'utente:

<select onclick="if (typeof(this.selectedIndex) != 'undefined') check(this.selectedIndex)"> 
<option>one</option> 
<option>two</option> 
<option>three</option> 

In questo modo è possibile chiamare check() se e solo se è selezionata un'opzione.

Modifica: come indicato da @ user422543 nei commenti, questa soluzione non funzionerà in Firefox.Ho quindi fatto un'altra domanda qui: Why does Firefox react differently from Webkit and IE to "click" event on "select" tag?

Finora sembra che usare il tag <select> non funzioni in modo coerente in tutti i browser. Tuttavia, se simuliamo un menu di selezione utilizzando la libreria come jQuery UI select menu o Chosen per creare un menu di selezione invece di utilizzare il tag <select>, l'evento verrà attivato sul tag <ul> o <li> che è coerente in tutti i browser che ho provato.

Answer 2

Questo emula un evento onclick sui tuoi option s registrando il numero di clic.

http://jsfiddle.net/yT6Y5/1/

• Il primo clic viene ignorato (utilizzato per espandere la vostra discesa),
• Il secondo clic è efficace il vostro "selezione". (Il conteggio dei clic viene quindi ripristinato).

Esso non è adatto per l'interazione della tastiera anche se ....

Oh, e sto facendo uso di JQuery, ma si potrebbe ri-farlo utilizzando puro JS

Answer 3

devi solo

• inserire lo script di sopra del select,
• impostare onclick e onbl per selezionare come mostrato nel codice
• e personalizzare la funzione di controllo.

L'ho provato e funziona :).

<script> 
    selectHandler = { 
     clickCount : 0, 
     action : function(select) 
     { 
      selectHandler.clickCount++; 
      if(selectHandler.clickCount%2 == 0) 
      { 
       selectedValue = select.options[select.selectedIndex].value; 
       selectHandler.check(selectedValue); 
      } 
     }, 
     blur : function() // needed for proper behaviour 
     { 
      if(selectHandler.clickCount%2 != 0) 
      { 
       selectHandler.clickCount--; 
      } 
     }, 
     check : function(value) 
     { 
      // you can customize this 
      alert('Changed! -> ' + value); 
     } 
    } 

</script> 
<select onclick="selectHandler.action(this)" onblur="selectHandler.blur()"> 
    <option value="value-1"> 1 </option> 
    <option value="value-2"> 2 </option> 
    <option value="value-3"> 3 </option> 
    <option value="value-4"> 4 </option> 
</select> 

Answer 4

ho un altro suggerimento, non è al 100%, ma quasi:

<select onchange="valueChanged(this.value); this.selectedindex = -1"> 
    <option style="display: none"></option> 
    <option value="1"> 1 </option> 
    <option value="2"> 2 </option> 
    <option value="3"> 3 </option> 
    <option value="4"> 4 </option> 
</select> 

In questo modo l'evento verrà attivato anche se l'utente ha selezionato la stessa opzione due volte. L'intoppo è che IE visualizzerà l'opzione vuota (ignora l'attributo di stile), ma facendo clic su di essa non si attiva l'evento, poiché inizia sempre come selezionato, e quindi selezionandolo non attiva onchange ...

Answer 5

ho trovato che le seguenti ha lavorato per me - invece di utilizzare il clic, l'uso sul cambiamento ad esempio:

jQuery('#element select').on('change', (function() { 

    //your code here 

})); 

Answer 6

Usa function(this) in id del tag select

ad esempio

<script type="application/javascript"> 

var timesSelectClicked = 0; 

$(function() { 
    $(document).on('click keypress', 'select', function (e) { 
     if (timesSelectClicked == 0) 
     { 
      timesSelectClicked += 1; 
     } 
     else if (timesSelectClicked == 1) 
     { 
      timesSelectClicked = 0; 
      prompt($('select option:selected').text()); 
     } 
    }); 
}); 
</script>