2

我已经尝试使用以下代码在 html 中创建下拉菜单

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

当您单击下拉菜单列表时打开：选项是：a b c d 按下退格键时正在显示的内容下拉应该关闭并且焦点必须设置为下拉，但是当焦点打开时我无法触发事件下拉列表项。我会很感激你帮助我。谢谢你。

4

1 回答 1

1

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

  • 当下拉菜单打开并且用户按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>
于 2013-11-08T04:34:00.983 回答