我尝试了以下代码来在 html 中创建下拉菜单
<select onkeydown="func()">
<option>a</option>
<option>b</option>
<option>c</option>
<option>d</option>
</select>
当您单击下拉菜单列表时，将打开: 选项有: A 乙 C d 我正在尝试的是按退格键，下拉列表应该关闭，并且焦点必须设置为下拉列表，但是当焦点位于下拉列表项上时，我无法触发事件。 如果您帮助我，我将不胜感激。 谢谢。
最佳答案
我已经发布了一个完整的示例， 它解决了以下问题
- When Drop down is open and user press BACKSPACE , it reset the value(Which can b any).
- Gives Focus back to Drop Down box
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Backspacing in a dropdown</title>
<script type="text/javascript"
src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<form>
<p>
When Drop Down is open and user has clicked Backspace, it goes back to selected value <br />
</p>
<select id="mySelectDropDown">
<option>Boston</option>
<option selected="true">Texas</option>
<option>London</option>
<option>Bolton</option>
</select>
</form>
<script type="text/javascript">
$(document).ready(function() { // FF needs keypress, IE needs keydown
$('select').keypress(function(event)
{ return cancelBackspace(event) });
$('select').keydown(function(event)
{ return cancelBackspace(event) });
}); // ready
function cancelBackspace(event) {
if (event.keyCode == 8) {
var element = document.getElementById('mySelectDropDown');
element.value = 'London';
$('#mySelectDropDown').toggle();
$('#mySelectDropDown').focus;
return false;
}
}
</script>
</body>
</html>
关于javascript - Html下拉: how to handle key events of select option element，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19851490/