JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

<script src="https://rawgit.com/selectize/selectize.js/master/dist/js/standalone/selectize.min.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/selectize/selectize.js/32ee80a8/dist/css/selectize.bootstrap3.css">
<link rel="stylesheet" href="https://rawgit.com/selectize/selectize.js/master/dist/css/selectize.css">
<form action="https://httpbin.org/get">
    <select class="form-control js-profile-province" data-cascade-child=".js-profile-city" data-cascade-key="Cities" id="Options_Province" name="Options.Province">
        <option value="">Any</option>
        <option value="Camgirl">Camgirl</option>
        <option value="Alberta">Alberta</option>
        <option value="British Columbia">British Columbia</option>
        <option value="Manitoba">Manitoba</option>
        <option value="Newfoundland">Newfoundland</option>
        <option value="New Brunswick">New Brunswick</option>
        <option value="Northwest Territories">Northwest Territories</option>
        <option value="Nova Scotia">Nova Scotia</option>
        <option value="Nunavut">Nunavut</option>
        <option value="Ontario">Ontario</option>
        <option value="P.E.I">P.E.I</option>
        <option value="Quebec">Quebec</option>
        <option value="Saskatchewan">Saskatchewan</option>
        <option value="Yukon">Yukon</option>
    </select>

    <select class="form-control js-profile-city" data-selectize name="Options.City" data-items="[{&quot;Name&quot;:&quot;Camgirl&quot;,&quot;Cities&quot;:[&quot;MyFreeCams&quot;,&quot;Chaturbate&quot;,&quot;Webcamming&quot;]},{&quot;Name&quot;:&quot;Alberta&quot;,&quot;Cities&quot;:[&quot;Calgary&quot;,&quot;Camgirl&quot;,&quot;Edmonton&quot;,&quot;Ft. Mcmurray&quot;,&quot;Grande Prairie&quot;,&quot;Lethbridge&quot;,&quot;Lloydminster&quot;,&quot;Medicine Hat&quot;,&quot;Online&quot;,&quot;Red Deer&quot;,&quot;St. Albert&quot;,&quot;Strip Club&quot;]},{&quot;Name&quot;:&quot;British...

JavaScript

console.clear();
$("select[data-selectize]").selectize({
    maxItems: null
});

$(document).on('change', '[data-cascade-child]', function() {
    var child = $($(this).data('cascade-child'));
    var items = child.data('items');
		
		var val = $(this).val();
    var key = $(this).data("cascade-key");

    var selectize = child[0].selectize;

    function addItems(cb) {
        $.each(items,
            function(ind, elem) {
                if (elem.Name === val) {
                    $.each(elem[key], cb);
                    return false;
                }
            });
    }

    if (selectize) {
        selectize.disable();
        selectize.clearOptions();

				addItems(function(i, item) {
					selectize.addOption({
						value: item,
						text: item
					});
				});
				
        selectize.refreshOptions(true);
        selectize.enable();
        console.log(selectize);
    } else {
        child.empty();

        var addAny = child.data("add-any");
				
        if (addAny === true) {
            var emptyStr = child.data("empty-str");
            if (!emptyStr) {
                emptyStr = "Select";
            }
            child.append('<option value="">' + emptyStr + '</option>');
        }

        addItems(function(i, item) {
					child.append('<option value="' + item + '">' + item + '</option>');
				});
    }
});