如何使用 jQuery 专注于元素？ [复制]答案

【问题标题】：How to focus on an element using jQuery? [duplicate]如何使用 jQuery 专注于元素？ [复制]
【发布时间】：2016-05-02 02:53:03
【问题描述】：

我有以下 html

<div>
   <span>Click me</span>
   <select>
       <option value="1" selected="selected">1</option>
       <option value="2">2</option>
       <option value="3">3</option>
       <option value="4">4</option>
   </select>
</div>

jQuery:

$('span').on('click', function () {
   $('select').focus(); 
});

我想要做的是，当我点击 span 标签时，选择菜单需要聚焦并下拉而不改变结构。我花了几个小时寻找解决方案，但我做不到。

http://jsfiddle.net/dqc9nLgk/1/

【问题讨论】：

看不出有什么不对哟！在这里使用您的代码？ jsfiddle.net/3pe7zv35
我不认为你可以启动下拉...集中使用$(this).next('select').focus(); - jsfiddle.net/arunpjohny/629e32ye/1
stackoverflow.com/questions/10453393/…

标签： javascript jquery html

【解决方案1】：

您在小提琴中使用了输入作为选择器。应该改为选择：

$('span').on('click', function () {
  $('select').focus(); 
});

Working Demo

更新：用于打开下拉菜单-

var dropdown = $('select')[0];
event = document.createEvent('MouseEvents');
event.initMouseEvent('mousedown', true, true, window);
dropdown.dispatchEvent(event);

Working Demo

【讨论】：

啊...但我也需要下拉选择菜单
@user3405435：更新了答案:)

【解决方案2】：

如果可以更改标记，您可以使用label html 元素而不是 span。它的设计目的是在没有 JavaScript 的情况下执行您想要（或在此处描述）的操作。

UPD：

关于“下拉”select，建议阅读相关问题：How can you programmatically tell an HTML SELECT to drop down (for example, due to mouseover)?

【讨论】：

【解决方案3】：

$('span').on('click', function () {
   $('select').focus(); 
});


http://jsfiddle.net/dqc9nLgk/2/

【讨论】：