JSFiddle - React, Tailwind, and code Playground

by thecodeparadox

HTML

<select>
    <option value="0">Initial Value</option>
</select>

<select class="fake" style="display: none">
    <option value="-1">Loading</option>
</select>

JavaScript

var $select = $('select');
$select.click(function(e) {
    $(this).hide(0);
    //$select.html('<option value="-1">Loading</option>');
    $('select.fake').show(0).

    $.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) {
        $('select.fake').hide();
        $select.show();
        $.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();    
});