Trigger a select form element to show its options (open drop down options list) with Javascript.

Question

Here is the markup

<select id="person_prefix" name="prefix">
 <option value=""></option>
 <option value="Dr" selected="selected">Dr</option>
 <option value="Mr">Mr</option>
 <option value="Ms">Ms</option>
 <option value="Mrs">Mrs</option>
</select>

and I want to trigger a javascript event so that the option list drops down. Using jquery I've tried the following:

$("#person_prefix").click();
$("#person_prefix").mousedown();
$("#person_prefix").change();

but nothing seems to work. Which event is this and how can be triggered?

Thanks

Answer 1

You can't do this cross-browser programmatically. You can replace the dropdown with an entirely custom solution not actually displaying a <select> element...but you can't programmatically show it, especially in IE.

The closest you can do is move the user to the element via .focus():

$("#person_prefix").focus();

This with some CSS styling for when it's focused (:focus) is usually a pretty good way to draw attention to it.

Answer 2

If you set the size attribute the select will display the number of options you specify in size.

var sel= document.getElementsByName('select_1')[0];
var len= '10'// or sel.options.length;
// safest: var len=sel.getElementsByTagName('*').length;
sel.setAttribute('size',len)

Setting size back to '1' collapses the select.