JSFiddle - React, Tailwind, and code Playground

by Town

HTML

<div id="context">
    <select class="lazyloadedselect"/>
</div>
<div id="valdiv"></div>

JavaScript

var Options = [
    {"name":"one", "value": "1"}, 
    {"name":"two", "value": "2"}, 
    {"name":"three", "value": "3"}
]

function LazyLoadOptionsIntoSelect($select, options)
{
    //get current option
    var current = $select.val();
    //alert (current);

    //repopulate options
    $select.html("");
    $("<option>").text("--Select a File--")
                .appendTo($select);
    $.each(options, function()
    {
        var item = this;
        $("<option>").attr("name", function () { return item.name; })
                .val(function () { return item.value; })
                .text(item.name)
                .appendTo($select);
    });

    //select previously selected option if still in list
    $select.val(current);

}

$("#context").delegate(".lazyloadedselect","focus", function() 
{  
    LazyLoadOptionsIntoSelect($(this), Options);
    $('#valdiv').html("value is " + $select.val());
});