8

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

1

6 Answers 6

8

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

2
  • Hey your solution is working for me but the select options disappear at the end of the click. How would you do it to keep the select options displayed until one is actually selected ? Nov 27, 2015 at 17:59
  • 1
    These days this only works in Safari (still doesn't work in Firefox and no longer works in Chrome). Mar 26, 2022 at 21:25
4

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.

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.

2
  • Some browsers don't account for optgroups, others count them like options and so don't show 10 options if you have 2 optgroups and specify options.length or 10.
    – kennebec
    Oct 2, 2010 at 20:11
  • Sorry, I stuttered and echoed my own comment.
    – kennebec
    Oct 2, 2010 at 20:11
2

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).

0

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);
1
  • 4
    var count = sel.find('option, optgroups').length; Sep 5, 2014 at 19:00
0

initMouseEvent is deprecated now, use this instead:

let e = new MouseEvent('mousedown', {
  bubbles: true,
  cancelable: true,
  view: window
})
element.dispatchEvent(e)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.