JSFiddle - React, Tailwind, and code Playground

HTML

<select id="selector">
    <option value="2" selected>Option 2</option>
</select>

JavaScript

$(function() {
    $("#selector").click(function() {
        if($("option", this).length < 2)
            GetOptions(this);
    }); 
});

function GetOptions(select) {
    var Options = [
        { id: 1, text: "Option 1"},
        { id: 2, text: "Option 2"},
        { id: 3, text: "Option 3"},
        { id: 4, text: "Option 4"},
        { id: 5, text: "Option 5"},
        { id: 6, text: "Option 6"},
        { id: 7, text: "Option 7"}
        ];
    $('option:first', select).remove();
    for(var i = 0; i < Options.length;i++)
    {
        var option = $("<option/>");
        option.val(Options[i].id).text(Options[i].text);
        $(select).append(option);
    }
    $(select).blur();
    
    var e = document.createEvent("MouseEvents");
    e.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    select.dispatchEvent(e);
}