JSFiddle - React, Tailwind, and code Playground

by Kai_Draord

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div ng-app="myApp" ng-controller="testCtrl">
  <div>
        City: <br>
        <select id="country" ng-model="states" ng-options="o.state for o in countries" required>
        <option value=''>Select</option>
        </select>
    </div>
    <br>

    <div>
        SubArea:<br>
        <select id="state" ng-disabled="!states" ng-model="cities" ng-options="o.city for o in states.cities" required>
        <option value=''>Select</option></select>
    </div>
    <br>

    <div>
        SpecLoc:<br>
        <select id="city" ng-disabled="!cities || !states" ng-model="districts">
        <option value=''>Select</option>
        <option ng-repeat="city in cities.districts" value='{{city}}'>{{city}}</option></select>        
    </div>

{{states.state}}

{{cities.city}}

{{districts}}
</div>

JavaScript

angular.module('myApp', []);
angular.module('myApp').controller('testCtrl', function($scope) {
	$scope.countries = [{
                    'state': 'New York City',
                    'cities': [{'city': 'manhattan', 'districts': ['Battery Park','Chelsea','Chinatown / Lit Italy','Downtown','East Harlem','East Village','Financial District','Flatiron','Gramercy','Greenwich Village','Harlem / Morningside','Inwood / Wash Hts','Lower East Side','Midtown','Midtown East','Midtown West','Murray Hill','Nolita / Bowery','SoHo','TriBeCa','Union Square','Upper East Side','Upper West Side','West Village']}
                    ,{'city': 'brooklyn', 'districts': []}
                    ,{'city': 'queens', 'districts': []}
                    ,{'city': 'bronx', 'districts': []}
                    ,{'city': 'staten island', 'districts': []}
                    ,{'city': 'new jersey', 'districts': []}
                    ,{'city': 'long island', 'districts': []}
                    ,{'city': 'westchester', 'districts': []}
                    ,{'city': 'fairfield co', 'districts': []}
                    ,{'city': 'fairfield co, CT', 'districts': []}]
                    },{
                    'state': 'Chicago',
                    'cities': [{'city': 'city of chicago', 'districts': []}
                    ,{'city': 'north chicagoland', 'districts': []}
                    ,{'city': 'west chicagoland', 'districts': []}
                    ,{'city': 'south chicagoland', 'districts': []}
                    ,{'city': 'northwest indiana', 'districts': []}
                    ,{'city': 'northwest suburbs', 'districts': []}]
                    },{
                    'state': 'Washington',
                    'cities': [{'city': 'district of columbia', 'districts': []}
                    ,{'city': 'northern virginia', 'districts': []}
                    ,{'city': 'maryland', 'districts': []}]
                    }
                ];
});