Question

我有以下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/

Answer 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

Answer 2

如果可以更改标记，则可以使用label html元素而不是span。它被设计成在没有JavaScript的情况下做你想要的（或在这里描述）。

<强> UPD：

关于＆＃34;下降＆＃34; select，我建议您阅读相关问题：How can you programmatically tell an HTML SELECT to drop down (for example, due to mouseover)?

Answer 3

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


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

如何使用jQuery专注于元素？

3 个答案: