28

How can a dropdown list can be opened with a trigger?

Here is the code which doesn't work:

$('select').trigger('click');

Just for note - mousedown and mouseup also doesn't work.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
sasa
  • 2,443
  • 5
  • 23
  • 35
  • 1
    Think this is the solution you need: http://stackoverflow.com/questions/499405/change-selected-value-of-drop-down-list-with-jquery – Russ Clarke May 24 '10 at 08:23
  • I've got this to work: http://stackoverflow.com/a/10136523/2541 – Sam Hasler Oct 25 '12 at 17:51
  • possible duplicate of [How can you programmatically tell an HTML SELECT to drop down (for example, due to mouseover)?](http://stackoverflow.com/questions/249192/how-can-you-programmatically-tell-an-html-select-to-drop-down-for-example-due) – Sam Hasler Oct 25 '12 at 17:52
  • did you figured out any working solution, btw I'm trying to open select2 (jquery plugin) ? – coding_idiot Aug 09 '15 at 17:29
  • **State of the art solution** for this quest: Increase the (vertical) size of the dropdown and style it (like `position:absolute`) that it looks open. That works cross-browser and is pretty simple. – Jonathan Sep 16 '21 at 17:38

5 Answers5

13
$('select').children('option').each(function() {
    if ($(this).is(':selected'))
    { $(this).trigger('change');  }
});
Noel Evans
  • 8,113
  • 8
  • 48
  • 58
Renso
  • 141
  • 1
  • 3
9

What you are trying to achieve is impossible. Even if you trigger a click the drop down list won't open like if the user clicked on it. If you want to change the currently selected value with a new one you could use the val function. I guess the only solution is to simulate the whole UI look and feel of a select element using divs.

Darin Dimitrov
  • 1,023,142
  • 271
  • 3,287
  • 2,928
  • 1
    Thanks for response. I don't want to change value, just want to open list... It seems that there isn't propertly solution for this... – sasa May 24 '10 at 08:37
8

Took me a while but found a solution:

(Chrome & Safari ONLY)

function open(elem) {
    if (document.createEvent) {
        var e = document.createEvent("MouseEvents");
        e.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        elem[0].dispatchEvent(e);
    } else if (element.fireEvent) {
        elem[0].fireEvent("onmousedown");
    }
}

http://jsfiddle.net/oscarj24/GR9jU/

Jonathan
  • 1,955
  • 5
  • 30
  • 50
5

There is no proper way to click on a dropdown programmatically.

You can either select an option via:

$('#sourceOptions>option:eq(0)').prop('selected', 'selected');

If you want to simulate a user click: you have to do it as @Renso says it:

$('#sourceOptions>option:eq(0)').prop('selected', 'selected').trigger('change');
Kjuly
  • 34,476
  • 22
  • 104
  • 118
izocan
  • 291
  • 1
  • 4
  • 16
0

Instead of trigger give it a size. This simply opens the select (tested in Chrome):

/////// $('select').trigger('click'); $('select')[0].size = 10;

klaus
  • 1
  • 1