JSFiddle - React, Tailwind, and code Playground
HTML
<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">Show dropdown items</button>
CSS
#dropdown {
display: none;
}
#dropdown.show {
display: inline-block;
}
JavaScript
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");
}
}
$(document).ready(function(){
$('#fire').click(function(event){
event.preventDefault();
event.stopImmediatePropagation();
$(this).blur();
$('#dropdown').addClass("show").focus();
open( $('#dropdown') );
});
$('#dropdown').blur(function(){
$(this).removeClass('show');
});
});