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

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?

Than开发者_开发百科ks

I was once searching how to do the same thing and didn't find any working solution but then a guy in our javascript group came with a clever work around. Here is the code.

HTML

<input type="button" id="show" value="show" />
<select id="myslect">
    <option>nothing</option>
    <option>something</option>
    <option>anything</option>
</select>

Javascript

$("#show").click(function () {
    var element = $("select")[0],
        worked = false;
    if(document.createEvent) { // chrome and safari
        var e = document.createEvent("MouseEvents");
        e.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        worked = element.dispatchEvent(e);
    }
    if(!worked) { // unknown browser / error
        alert("It didn't worked in your browser.");
    }
});

I'm not sure how to link to the group post so you can see the whole thread. Anyway credits to CJ Madolara. Good Job!

Update: Only works on Chrome and Safari

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.

You can't trigger click event on select form element but the proper workaround is this plugin:
jQuery.customSelect

The great advantage is that it launches the real select element (you actually click on an invisible select - opacity: 0), which is important on mobile devices (e.g. iPhone has its own layout for displaying select's options).

If you don't want to download the whole plugin you can then prepare the solution on your own since you know how to trigger the select (hide it by setting opacity: 0 - it will be still clickable).

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.

building on @kennebec's answer, a jQuery version to get a count of the options and optgroups:

var sel = $('select.mySelectClass'); 
var count=0;

sel.find('option').each(function() {

     count++;
});

sel.find('optgroups').each(function() {

     count++;
});

sel.attr('size',count);