点击选项标签不工作在IE浏览器和铬
我正在使用选项标签中的onclick事件来select框
<select> <option onclick="check()">one</option> <option onclick="check()">two</option> <option onclick="check()">three</option> </select>`
onclick事件不工作在IE和Chrome，但它在Firefox中工作正常，在这里我不想在select标签bcz上使用onchange事件，它不会触发事件，如果用户再次select相同的选项
例如：说第一次用户select“一”下拉菜单我会打开一个popup后处理一些东西用户closurespopup，假设如果用户想要select相同的“一”下拉，它不会触发任何event.this可以解决使用onclick事件在选项标签，但它不工作在IE浏览器和铬
有没有解决这个问题？
option标记上的onclick事件将在大多数IE，Safari和Chrome版本上失败： 引用
如果你想在用户select时触发一个事件，为什么不简单地使用：
<select onclick="check()"> <option>one</option> <option>two</option> <option>three</option>
如果你想用特定的选项用户select一些东西：
<select onclick="if (typeof(this.selectedIndex) != 'undefined') check(this.selectedIndex)"> <option>one</option> <option>two</option> <option>three</option>
这样，当且仅当select一个选项时，才保证调用check() 。
编辑：正如@ user422543在评论中指出的，这个解决scheme在Firefox中将不起作用。 因此，我在这里问了另一个问题： 为什么Firefox对Webkit和IE的反应与“select”标签上的“click”事件不同？
到目前为止，似乎使用<select>标记在所有浏览器中都不能一致地工作。 但是，如果我们使用库来模拟select菜单（如jQuery UIselect菜单或select创buildselect菜单而不是使用<select>标记），则click事件将在<ul>或<li>标记上触发我testing过的浏览器
我有另一个build议，这不是100％，但几乎：
<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>
这样，即使用户select了相同的选项两次，该事件也会被触发。 顺便说一句，IE浏览器将显示空的选项（它忽略了风格属性），但点击它不会触发事件，因为它始终作为被选中，因此select它不会触发onchange …
这通过logging点击次数来模拟option上的onclick事件。
- 第一次点击被忽略（用于扩展您的下拉菜单），
- 第二次点击实际上是您的“select”。 （点击计数然后重置）。
它不会迎合键盘交互，虽然….
哦，我正在使用JQuery，但是你可以使用纯JS重新做
你只需要
- 把上面的脚本选上，
- 设置onclick和onblurselect代码所示
- 并自定义检查function。
我已经testing它，它的作品:)。
<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>
我发现以下工作对我来说 – 而不是使用点击，使用更改例如：
jQuery('#element select').on('change', (function() { //your code here }));
在select标记的id中使用function(this)
例如
<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>
