Question

我有使用div和span标签创建的下拉列表。这就是我当前的下拉列表。

<div id="userList>
   <div class="selectOption">
         <span class="selectOption Current" value="mike">Mike</span>
         <span class="selectOption" value="andrew">Andrew</span>
         <span class="selectOption" value="emma">Emma</span>
   </div>
<div>

目前，如果在展开列表时按“E”，则不会自动选择用户Emma。

我希望在打开此下拉列表时按第一个字母上的键来选择用户。

我已经研究了很多，但找不到解决方案。

有人能为我提供这个问题的解决方案吗？

Answer 1

这可能比您正在寻找的更多，但这里有一个示例，可以创建类似于您描述的下拉列表。希望您能从项目示例中获得一些想法。

关键的想法是使用keyup()来捕获按键。但是，为了防止错误，我们首先测试以确保点击的最后一个元素是下拉列表（标题div或其中一个跨度）。

此外，ID已添加到每个范围，以便更轻松地设置单击的范围。

Full jsFiddle Example

$(document).keyup(function(e){
    if ( activeEl=='ulTitle' || activeEl=='selectOption' ){
        $('.selectOption').removeClass('Current');

        var code = e.keyCode || e.which;
        if (code==77 || code==109) { //m or M
            key='m';
            nam='Mike';
        }else if(code==65 || code==97) { //m or M
            key='a';
            nam='Andrew';
        }else if(code==69 || code==101) { //m or M
            key='e';
            nam='Emma';
        }else if(code==13) { //Enter key
            $('#mybutt').click();
        }
        $('.selectOption#'+key).addClass('Current');
    }
});

如何在下拉列表中选择不同的跨度值

1 个答案: