Onclick auf Option-Tag arbeiten nicht auf IE und Chrom

Question

ich für select Box onclick Ereignis in Option-Tag bin mit

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

onclick Ereignis nicht funktioniert auf IE und Chrome, aber es funktioniert gut in firefox, hier ich will nicht onchange Ereignis auf select-Tag bcz verwenden wird es nicht ein Ereignis auslösen, wenn der Benutzer dieselbe Option wählt wieder

Beispiel: sagen Erstnutzer „ein“ Drop-Down-wählt werde ich ein Popup öffnen, nachdem einige Verarbeitung stuff user cl Onclick-Ereignis auf Option-Tag, aber es funktioniert nicht auf IE und Chrom

Gibt es eine Arbeit Osés das Popup an, dass, wenn der Benutzer möchte wählen same „ein“ Dropdown es irgendwelche event.this Verwendung gelöst werden können, nicht auslösen herum für das?

Answer 1

onclick Ereignis auf option Tag auf den meisten Versionen von IE, Safari und Chrome fehl: reference

Wenn Sie ein Ereignis auslösen soll, wenn Benutzer wählen, warum nicht einfach verwenden:

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

Und wenn Sie etwas mit der spezifischen Option Benutzer ausgewählt haben möchten:

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

Auf diese Weise rufen Sie garantiert check() an, wenn und nur wenn eine Option ausgewählt ist.

Edit: Wie @ user422543 in den Kommentaren darauf hingewiesen, wird diese Lösung in Firefox nicht funktionieren.Ich fragte daher eine andere Frage hier: Why does Firefox react differently from Webkit and IE to "click" event on "select" tag?

Bisher scheint es mit <select> Tag wird nicht einheitlich in allen Browsern arbeiten. Wenn wir jedoch ein Auswahlmenü mit einer Bibliothek wie jQuery UI select menu oder Chosen simulieren, um ein Auswahlmenü anstelle von <select> zu erstellen, wird das Ereignis click auf <ul> oder <li> ausgelöst, das in allen getesteten Browsern konsistent ist.

Answer 2

Dies emuliert ein onclick Ereignis auf Ihrem option s, indem die Anzahl der Klicks aufgezeichnet wird.

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

• Der erste Klick ignoriert wird (verwendet, um Ihren Drop-Down zu erweitern),
• Der zweite Klick ist effektiv Ihre "Auswahl". (Der Klickzähler wird dann zurückgesetzt).

Es ist nicht jedoch für Tastatur Interaktion ....

Oh, und ich mache Gebrauch von JQuery nicht gerecht zu werden, aber man könnte es mit reinem JS re-do

Answer 3

Sie müssen nur

• das Skript über die Auswahl setzen,
• gesetzt Onclick und onbl Wählen Sie wie im Code
• ausgewählt und passen Sie die Prüffunktion an.

Ich habe es getestet und es funktioniert :).

<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

ich einen anderen Vorschlag, es ist nicht 100%, aber fast:

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

Auf diese Weise wird das Ereignis auch ausgelöst werden, wenn der Benutzer zweimal die gleiche Option ausgewählt. Der Haken ist, dass IE die leere Option anzeigen wird (es ignoriert das Stilattribut), aber das Klicken auf es löst das Ereignis nicht aus, da es immer als ausgewählt ausgewählt wird, und daher wird es nicht onchange ...

Answer 5

fand ich, dass das für mich gearbeitet folgenden - statt über die Verwendung auf klicken, verwenden Sie auf Änderung zB:

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

    //your code here 

})); 

Answer 6

verwenden function(this) in id von select-Tag

zum Beispiel

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