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

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，或其中一个 span)。

此外，ID 被添加到每个 span 中，以便更简单地设置被点击的 span 的样式。

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');
    }
});