jquery - Expand select dropdown

Question

I am trying to expand a select dropdown upon clicking on a link.

<button type="button" id="btn">Click Me!</button> 
<select id='sel' name='sel'>
    <option>item 1</option>
    <option>item 2</option>
    <option>item 3</option>
    <option>item 4</option>
</select>

And the Javescript is as follows.

$(document).ready(function() {
    $("#btn").click(function() {
       $("#sel").trigger('click');
    });
});

Any Ideas...??

Answer 1

You cannot mimic native browser event using .trigger. Looking at this link to the jQuery tutorial it seems you need .simulate method from jquery.simulate.js. Moreover the open event of the dropdown box is given by mousedown not click.

Update: So the code become:

$(document).ready(function() {
    $("#btn").click(function() {
       $("#sel").simulate('mousedown');
    });
});