JSFiddle - React, Tailwind, and code Playground

HTML

<select id="selId" class="pos_fixed">
 <option value="volvo">Option1</option>
 <option value="saab">Option2</option>
 <option value="mercedes">Option3</option>
 <option value="audi">Option4</option>
 </select>
<span class ="xxx">open</span>

JavaScript

jQuery(document).ready(function($) {

    $(".xxx").on('click', function () {
        openSelect($('#selId'));
    });


    var openSelect = function(selector){
        var element = selector[0], worked = false;
        if (document.createEvent) { // all browsers
            var e = document.createEvent("MouseEvents");
            e.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            worked = element.dispatchEvent(e);
        } else if (element.fireEvent) { // ie
            worked = element.fireEvent("onmousedown");
        }
        if (!worked) { // unknown browser / error
            alert("It didn't worked in your browser.");
        }
    }

});