JSFiddle - React, Tailwind, and code Playground
HTML
<select>
<option onclick="doClick(this.value);" value="0">Initial Value</option>
<option onclick="doClick(this.value);" value="1">Initial Value</option>
</select>
JavaScript
var $select = $('select');
$select.click(function(e){
$select.html('<option value="-1">Loading</option>');
$.ajax({
url: '/echo/json/',
method:'post',
dataType: "json",
contentType: "application/json; charset=utf-8",
data: { json: JSON.stringify([1, 2, 3]), delay:1 }
}).done(function(data){
$.each($.map(data, function (item, i) {
return "<option value='" + item +"' >" + item + "</option>";
}), function (i, item) {
$element.append(item);
});
}).fail(function(){
alert('error');
});
e.preventDefault();
e.stopPropagation();
$(this).blur();
});