Question

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

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

当您点击下拉菜单列表时，会打开：选项是：一个 b C d 我正在按下退格键，下拉应关闭，焦点必须设置为下拉，但当焦点位于下拉列表项时，我无法触发事件。我很感激帮助我。谢谢。

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

Html下拉菜单：如何处理select选项元素的关键事件

1 个答案: