Click trigger on select box doesn't work in jQuery

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.

Solution 1:

$('select').children('option').each(function() {
    if ($(this).is(':selected'))
    { $(this).trigger('change');  }
});

Solution 2:

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.

Solution 3:

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/

Solution 4:

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');