JSFiddle - React, Tailwind, and code Playground

HTML

<select id="selectMenu">
    <option value="1">1</option>
    <option value="2">2</option>
</select>

<select id="selectMenu2">
    <option value="1">1</option>
    <option value="2">2</option>
</select>

<input id="button" name="button" type="button" value="Click Me" />

CSS

select { 
    display: block; 
    width: 100%; 
}
#selectMenu { margin-bottom: 50px; }
#selectMenu2 { margin-bottom: 200px; }

JavaScript

var initEvt = function (el, type) {
        var e = document.createEvent('MouseEvents');
        e.initEvent(type, true, true, window);
        el.dispatchEvent(e);
    },
    selMenu;

selMenu = document.getElementById('selectMenu');

document.getElementById('button').onclick = function () { 
        initEvt(selMenu, 'mouseover');
        initEvt(selMenu, 'mousedown');
        initEvt(selMenu, 'mouseup');
        initEvt(selMenu, 'click');  
}