JSFiddle - React, Tailwind, and code Playground

by smotru

HTML

<script src="http://ivaynberg.github.com/select2/select2-master/select2.js"></script>
<link rel="stylesheet" href="http://ivaynberg.github.io/select2/select2-master/select2.css">
<select id="first" class="init-select2" data-placeholder="First dropdown" data-allowclear="true">
    <option></option>
    <option>First option</option>
    <option>Second option</option>
</select>
<select id="second" class="init-select2" data-placeholder="Second Dropdown" data-allowclear="true" disabled="disabled">
    <option></option>
</select>

JavaScript

$(function() {
    $('.init-select2').removeClass('init-select2').each(function(){
            if ($(this).attr("data-allowclear") && $(this).attr("data-allowclear") == "true"){
                $(this).select2({
                    allowClear: true
                });
            } else if ($(this).attr("data-allowclear") && $(this).attr("data-allowclear") == "false") {
                $(this).select2({
                    allowClear: false
                });
            }
        });

    $('#first').change(function () {
        var options = [];
        $.ajax({
            type: "POST",
            url: "/echo/json/",
            data: {"json":JSON.stringify({"one":"first","two":"second","three":"third"})},
            cache: false,
            
            success: function(data) {
                $.each(data, function (index, value) {
                    options.push("<option>" + value + "</option>");
                    $("#second").find('option').remove().end().append(options).attr("disabled", false).select2({ allowClear: true });
                });
            }
        }); 
    });
});