JSFiddle - React, Tailwind, and code Playground

by jatinder_singh02

HTML

<script src="http://igniteui.com/js/modernizr.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>

<div class="group-container overHidden">
        <div class="overHidden">
            <div class="comboGroup">
                <div>Country</div>
                <span id="comboCountry"></span>
            </div>
            <div class="comboGroup">
                <div id="state">State</div>
                <div id="district">District</div>
                <span id="comboDistrict"></span>
            </div>
            <div class="comboGroup">
                <div>Town</div>
                <span id="comboTown"></span>
            </div>
        </div>
    </div>

CSS

.label-container {
            margin: 5px 0;
        }

        span[id^="combo"] {
            margin-right: 15px;
        }

        #state, #stateCascading {
            display: none;
        }

        .group-container {
            padding: 10px;
            margin-bottom: 10px;
            clear: both;
        }

        .group-title {
            font-weight: bold;
        }

        .comboGroup {
            float: left;
        }

        .overHidden {
            overflow: hidden;
        }

JavaScript

$(function () {
var dsCountry, dsCascTowns, dsCountryCascading,
            dsCountryCascading, dsStatesUSCascading, dsDistrictBGCascading;

        dsCountry = [
			{ txtCountry: "United States", valCountry: "US" },
			{ txtCountry: "Bulgaria", valCountry: "BG" }
        ];

        dsCascDistrict = [
			{ keyCountry: "US", txtDistrict: "New Jersey", valDistrict: "NJ" },
			{ keyCountry: "US", txtDistrict: "California", valDistrict: "CA" },
			{ keyCountry: "US", txtDistrict: "Illinois", valDistrict: "IL" },
			{ keyCountry: "US", txtDistrict: "New York", valDistrict: "NY" },
			{ keyCountry: "US", txtDistrict: "Florida", valDistrict: "FL" },
			{ keyCountry: "BG", txtDistrict: "Sofia", valDistrict: "SA" },
			{ keyCountry: "BG", txtDistrict: "Plovdiv", valDistrict: "PV" },
			{ keyCountry: "BG", txtDistrict: "Varna", valDistrict: "V" },
			{ keyCountry: "BG", txtDistrict: "Yambol", valDistrict: "Y" }
        ];

        dsCascTowns = [
			{ keyDistrict: "NJ", textTown: "Atlantic City", valTown: "AtlanticCity" },
			{ keyDistrict: "NJ", textTown: "Dover", valTown: "Dover" },
			{ keyDistrict: "CA", textTown: "Los Angeles", valTown: "LosAngeles" },
			{ keyDistrict: "CA", textTown: "San Francisco", valTown: "San Francisco" },
			{ keyDistrict: "CA", textTown: "San Diego", valTown: "SanDiego" },
			{ keyDistrict: "IL", textTown: "Chicago", valTown: "Chicago" },
            { keyDistrict: "NY", textTown: "New York", valTown: "NewYork" },
			{ keyDistrict: "NY", textTown: "Buffalo", valTown: "Buffalo" },
			{ keyDistrict: "FL", textTown: "Miami", valTown: " Miami" },
			{ keyDistrict: "FL", textTown: "Orlando", valTown: "Orlando" },
			{ keyDistrict: "SA", textTown: "Sofia", valTown: "Sofia" },
			{ keyDistrict: "SA", textTown: "Pernik", valTown: "Pernik" },
			{ keyDistrict: "PV", textTown: "Plovdiv", valTown: "Plovdiv" },
			{ keyDistrict: "PV", textTown: "Asenovgrad", valTown: "Asenovgrad" },
			{ keyDistrict: "V", textTown: "Varna", valTown: "Varna" },
			{...