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="states as country for (country, states) in countries" required>
        <option value=''>Select</option>
        </select>
    </div>
    <br>

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

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

</div>

JavaScript

angular.module('myApp', []);
angular.module('myApp').controller('testCtrl', function($scope) {
	$scope.countries = {
                    'New York City': {
                        'manhattan': ['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'],
                        'brooklyn': [],
                        'queens': [],
                        'bronx': [],
                        'staten island': [],
                        'new jersey': [],
                        'long island': [],
                        'westchester': [],
                        'fairfield co': [],
                        'fairfield co, CT': []
                    },
                    'Chicago': {
                        'city of chicago': [],
                        'north chicagoland': [],
                        'west chicagoland': [],
                        'south chicagoland': [],
                        'northwest indiana': [],
                        'northwest suburbs': []
                    },
                    'Washington': {
                        'district of columbia': [],
                        'northern virginia': [],
                        'maryland': []

                    }
                };
});