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

Savvas Georgiou
  • 91
  • 1
  • 2
  • 4
  • Possible duplicate of [How can you programmatically tell an HTML SELECT to drop down (for example, due to mouseover)?](https://stackoverflow.com/questions/249192/how-can-you-programmatically-tell-an-html-select-to-drop-down-for-example-due) – rath Oct 10 '17 at 10:34

5 Answers5

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

Mark Anthony Uy
  • 219
  • 3
  • 6
  • 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 ? – David Geismar Nov 27 '15 at 17:59
  • 1
    These days this only works in Safari (still doesn't work in Firefox and no longer works in Chrome). – derpedy-doo Mar 26 '22 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.

Nick Craver
  • 623,446
  • 136
  • 1,297
  • 1,155
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).

matewka
  • 9,912
  • 2
  • 32
  • 43
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.

kennebec
  • 102,654
  • 32
  • 106
  • 127
  • 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 02 '10 at 20:11
  • Sorry, I stuttered and echoed my own comment. – kennebec Oct 02 '10 at 20:11
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);
jsh
  • 1,995
  • 18
  • 28