Javascript Html下拉列表：如何处理select选项元素的关键事件_Javascript_Jquery_Html

Javascript Html下拉列表：如何处理select选项元素的关键事件

javascript jquery html

Javascript Html下拉列表：如何处理select选项元素的关键事件,javascript,jquery,html,Javascript,Jquery,Html,我尝试了下面的代码来创建html中的下拉菜单 <select onkeydown="func()"> <option>a</option> <option>b</option> <option>c</option> <option>d</option> </select> A. B C D 当您单击下拉菜单时，列表将打开：选项包括： A. B C D 我正在尝试的是按下

我尝试了下面的代码来创建html中的下拉菜单

<select onkeydown="func()">
<option>a</option>
<option>b</option>
<option>c</option>
<option>d</option>
</select>


A.
B
C
D

当您单击下拉菜单时，列表将打开：选项包括： A. B C D 我正在尝试的是按下backspace键，下拉列表应该关闭，焦点必须设置为dropdown，但当焦点位于下拉列表项上时，我无法触发事件。如果你能帮助我，我将不胜感激。

谢谢。

我发布了一个完整的示例，它解决了以下问题

当下拉菜单打开且用户按BACKSPACE键时，它会重置该值（可以任意设置）
将焦点返回到下拉框


下拉菜单中的退格

当下拉列表打开且用户单击Backspace时，它将返回到所选值


波士顿
得克萨斯州
伦敦
博尔顿
$（文档）.ready（函数（）{//FF需要按键，即需要按键）
$（'select'）。按键（函数（事件）
{返回取消退格（事件）}）；
$（'select'）.keydown（函数（事件）
{返回取消退格（事件）}）；
}); // 准备好的
函数取消退格（事件）{
如果（event.keyCode==8）{
var元素=document.getElementById（'mySelectDropDown'）；
element.value='London'；
$（“#mySelectDropDown”）.toggle（）；
$（“#mySelectDropDown”）.focus；
返回false；
}
}

检查解决方案！，并根据您的要求进行修改，如果您需要……：）@mateen您可以使用element.selectedIndex=0；我检查了你的代码，但仍然没有解决我的目的，在上面的代码中，退格仅在下拉列表关闭时起作用，但我希望在下拉列表列出/打开时退格起作用。它的工作伙伴，有和没有打开下拉列表。。。jquery在你这边工作吗？jquery在我这边工作，但它仍然不工作，我尝试的是：我点击下拉列表，列表打开时显示“Boston Texas London Bolton”，现在使用键盘向下键我导航到“London”，现在焦点在伦敦，我仍然没有关闭下拉列表，请注意，现在我按backspace键，下拉列表本应关闭，但未发生，请提供帮助

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