How to focus on an element using jQuery?

Question

I have following 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(); 
});

What I want to do is when I click on span tag the select menu needed to be focused and dropped down without changing the structure. I spent hours to find a solution for this but I couldn't.

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

Can't see anything wrong yo! working here with your code? http://jsfiddle.net/3pe7zv35/ — Tats_innit, Aug 25 '14 at 09:16
I don't think you can initiate the drop down... to focus use `$(this).next('select').focus();` - http://jsfiddle.net/arunpjohny/629e32ye/1/ — Arun P Johny, Aug 25 '14 at 09:16
http://stackoverflow.com/questions/10453393/how-to-open-the-select-input-using-jquery — Arun P Johny, Aug 25 '14 at 09:23

Milind Anantwar · Accepted Answer · 2014-08-25T09:22:52.907

2

You have used input as selector in fiddle. it should be select instead:

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

Working Demo

Update: For opening dropdown-

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

Working Demo

edited Aug 25 '14 at 09:22

answered Aug 25 '14 at 09:16

Milind Anantwar

81,290
25
94
125

Ah... but i need select menu to be dropped down as well – sam No1 Aug 25 '14 at 09:18

score 1 · Answer 2 · edited May 23 '17 at 10:28

1

If it is possible to change markup, you may use label html element instead of span. It is been designed to do what you want (or describing here) without JavaScript.

UPD:

About "dropped down" select, I suggest you to read related question: How can you programmatically tell an HTML SELECT to drop down (for example, due to mouseover)?

edited May 23 '17 at 10:28

Community

1
1

answered Aug 25 '14 at 09:15

BlitZ

12,038
3
49
68

score 0 · Answer 3 · answered Aug 25 '14 at 09:22

0

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


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

answered Aug 25 '14 at 09:22

Navneet

447
4
13

How to focus on an element using jQuery?

3 Answers3