javascript onclick 警报在 chrome 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4340690/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript onclick alert not working in chrome
提问by kapitanluffy
<select name="history" id="history" >
<option value="history 1" onClick="alert('h1');">history 1</option>
<option value="history 2" onClick="alert('h2');">history 2</option>
<option value="clearhistory" onClick="this.form.submit();" >Clear History</option>
</select>
could someone help me with this script? i am expecting that whenever the user clicks history 1 ..it will alert h1 the script works in firefox and IE but not in Chrome :(
有人可以帮我写这个脚本吗？我期待每当用户点击历史记录 1 ..它会提醒 h1 该脚本在 firefox 和 IE 中有效，但在 Chrome 中无效:(
回答by PEPSON
If you want to use onClickfor option element in Chrome, IE, etc., you must use short fix: set onChangeattribute of select element to "this.options[this.selectedIndex].onclick()"
如果你想onClick在 Chrome、IE 等中使用option 元素，你必须使用简短的修复：将onChangeselect 元素的属性设置为"this.options[this.selectedIndex].onclick()"
回答by Silkster
use onchange instead of onclick for select lists.
对选择列表使用 onchange 而不是 onclick。
<select name="history" id="history" onchange="historyChanged(this);">
<option value="history1">history 1</option>
<option value="history2">history 2</option>
<option value="clearhistory">Clear History</option>
</select>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function historyChanged() {
var historySelectList = $('select#history');
var selectedValue = $('option:selected', historySelectList).val();
alert(selectedValue);
if (selectedValue == 'clearHistory') {
historySelectList.form.submit();
}
}
$(function() {
alert('my alert');
$('select#history').change(historyChanged);
});
</script>
回答by u476945
Use onChange on the select instead of each option. here is the jsfiddle http://jsfiddle.net/tBjkg/
在选择上使用 onChange 而不是每个选项。这是 jsfiddle http://jsfiddle.net/tBjkg/
<select name="history" id="history" onChange="alert(this.value);">
<option value="history1">history 1</option>
<option value="history2">history 2</option>
<option value="clearhistory">Clear History</option>
</select>
The alert(this.value) is referring to the value of the option within the select that is currently selected.
alert(this.value) 指的是当前选择的选择中的选项的值。
回答by iF_
In some browsers,
在某些浏览器中，
choosing same option second time,
第二次选择相同的选项，
no onchange-event throws.
没有 onchange 事件抛出。
This helps:
这有助于：
<select onchange="alert/*orwhateveryoudowith:*/(this.value);/*but set:*/this.selectedIndex=0">
<option disabled selected>Choose your Plan</option>
<option value=1>Plan 1</option>
<option value=2>Plan 2</option>
<option value=3>Plan 3</option>
</select>
回答by Julius
Although the selected solution works, but here is a more clearer and easy way to do this:
虽然所选的解决方案有效，但这里有一个更清晰、更简单的方法来做到这一点：
<select name="history" id="history" >
<option value="history 1">history 1</option>
<option value="history 2">history 2</option>
<option value="clearhistory">Clear History</option>
</select>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#history').on('change', function() {
if ( this.value == 'history 1')
{
alert('h1');
// You can also do anything here
}
if ( this.value == 'history 2')
{
alert('h2');
// You can also do anything here
}
if ( this.value == 'clearhistory')
{
this.form.submit();
// You can also do anything here
}
});
});
</script>
