在选择时模拟点击事件（不适用于IE和FF）

Question

I want to simulate click event on select using button. I have inspired through the following link. Simulate click on select element with jQuery

On above thread this fiddle is working fine for chrome. I am facing an issue with same behavior for firefox and Internet explorer.

I have edited the fiddle. This is fiddle but it seems it is not working. In this fiddle I am able to get into the function but actual click event is not firing on select. I am missing pieces of code and because of that my code is not working. Any help with fill in the blanks.

here is HTML code.

<select id="dropdown">
<option value="Red">Red</option>
<option value="Green">Green</option>
<option value="Blue">Blue</option>
</select>
<br>
<button id="fire" type="button" onclick="runThis()">Show dropdown items</button>

This is Javascript.

// <select> element displays its options on mousedown, not click.
showDropdown = function (element) {
var event;
event = document.createEvent('MouseEvents');
event.initMouseEvent('mousedown', true, true, window);
element.dispatchEvent(event);
}; 

// This isn't magic.
window.runThis = function () { 
var dropdown = document.getElementById('dropdown');
//showDropdown(dropdown);
eventFire(dropdown, 'click');
};
function eventFire(el, etype) {
alert('hi');
if (el.fireEvent) {
    el.fireEvent('on' + etype);
    el[etype]();
} else {
    var evObj = document.createEvent('Events');
    evObj.initEvent(etype, true, false, window);
    el.dispatchEvent(evObj);
}
}

Also I found couple of references for the same kind of operation.

HTML file

    <button>Trigger the link below</button><br />
    <a href="http://www.yahoo.com/"  target="_blank">
    http://www.google.com/</a> (new window)
    <br>
        <select id="dropdown">
    <option value="Red">Red</option>
   <option value="Green">Green</option>
   <option value="Blue">Blue</option>
   </select>

This is javascript file.

function eventFire(el, etype) {
alert('hi');
if (el.fireEvent) {
    el.fireEvent('on' + etype);
    el[etype]();
} else {
    var evObj = document.createEvent('Events');
    evObj.initEvent(etype, true, false);
    el.dispatchEvent(evObj);
}
}

document.getElementsByTagName("button")[0].onclick = function() {
var element = document.getElementsByTagName("select")[0];
eventFire(element, "click");
};

This above fiddle is also not working. Please let me know if any more information needed.

Above fiddle I am referencing from stackoverflow itself. Because of my account limitation I can not paste direct link.

Answer 1

Here is what I did:

$("#fire").click(function () {
    var e = document.createEvent("MouseEvents");
    e.initMouseEvent("mousedown");
    $("#dropdown")[0].dispatchEvent(e);
});

Here is the JSFiddle demo