Show select dropdown in jQuery?

Question

Possible Duplicate:
How can you programmatically tell an HTML SELECT to drop down (for example, due to mouseover)?

Is it possible to make the dropdown on a select element visible with jQuery?

I tried using $('#dropdown').click();, but it has no effect.

see http://stackoverflow.com/questions/2800266/programmatically-open-a-drop-down-menu/2800276#2800276 — sje397, Dec 16 '10 at 03:04
Cheers, I did try searching, Guess I did not use the right words... Thanks — Hailwood, Dec 16 '10 at 03:07

score 7 · Accepted Answer · answered Dec 16 '10 at 03:11

7

This is not possible. You can only implement your own select-box, but this is bad for usability.

another approach is to programmatically change the size-attribute of the select-box, but this is not really what you wanted.

I suggest to think of why you need this and if there would be a nicer software-pattern?

answered Dec 16 '10 at 03:11

Stuck

11,225
11
59
104

2

It is possible now - just fireEvent mousedown - solved here : http://stackoverflow.com/questions/10453393/how-to-open-the-select-input-using-jquery – jave.web Aug 28 '13 at 09:45
1

Only worked in Chrome for me. IE8 or FF didn't work; so it still isn't possible in a browser friendly way. – 321X Sep 03 '13 at 09:02

score 3 · Answer 2 · answered Dec 16 '10 at 03:12

No - you are unable to do this. It's roughly along the same lines of a button in it's pressed state when a user clicks it - an 'interim' operation for the user to set a value. You could focus to it, but that's about it.

If you really wanted to simulate this, you could play with some CSS. For example, you could create a list that looks like the dropdown list and set the dropdown value based on whatever the user clicks - similar to how an autocomplete list looks.

You could always change it to a multiple line list box if you wanted to display all the values to the user. You'd do this by setting the size to any value and back to 1 when you want to hide. It's not perfect, but it's another option:

$("#open").click(function(e){
   e.preventDefault();
   $("#myselect").attr("size",5);    
});

$("#myselect").click(function(){
   $(this).attr("size",1); 
});

http://jsfiddle.net/jonathon/cr25U/

score 2 · Answer 3 · edited Nov 06 '11 at 01:37

Here's my adaption:

HTML

<button id='btn'>Click Me</button>
<select id='test'>
    <option>Blah 1</option>
    <option>Blah 2</option>
    <option>Blah 3</option>
    <option>Blah 4</option>
</select>

JavaScript

$('#btn').click(function(){
    $('#test').attr('size', 5);
});

$('#test').change(function() {
   $(this).attr('size', 1); 
});

This doesn't open the drop list, but it kind of works.

Demo here.

Show select dropdown in jQuery?

3 Answers3

Linked

Related