JSFiddle - React, Tailwind, and code Playground

by shauncl

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery.js"></script>
<div ng-app class="container row" >            
            <form role="form">
                <div class="form-group" ng-controller="dropdownCtrl" >
                    
                    <div class="col-md-4">
                        <select class="form-control"                                                    
                            ng-model="selectedParentItem"                        
                            ng-options="p.displayName for p in parentItems">                        
                        </select>
                    </div>
                    <div class="col-md-4">
                        <select class="form-control"                                                    
                            ng-model="selectedChildItem"                     
                            ng-options="c.displayName for c in filteredArray | filter:{parentId: selectedParentItem.id}">                        
                        </select>
                    </div>
                    <div class="col-md-4">
                        <select class="form-control"                                                    
                            ng-model="selectedGrandChildItem"                        
                            ng-options="g.displayName for g in grandChildItems | filter:{parentId: selectedChildItem.parentId}">                        
                        </select>
                    </div>

                </div>
            </form>
        </div>

JavaScript

function dropdownCtrl($scope, filterFilter) {
    $scope.parentItems = [
        {
            "id": 0,
            "displayName": "parent 00"
        },
        {
            "id": 1,
            "displayName": "parent 01"
        },
        {
            "id": 2,
            "displayName": "parent 02"
        }
    ];
    $scope.selectedParentItem = $scope.parentItems[0];

    $scope.childItems = [
        {
            "id": 0,
            "displayName": "child0 of 00",
            "parentId": 0
        },
        {
            "id": 1,
            "displayName": "child1 of 00",
            "parentId": 0
        },
        {
            "id": 2,
            "displayName": "child2 of 00",
            "parentId": 0
        },
        {
            "id": 3,
            "displayName": "child0 of 01",
            "parentId": 1
        },
        {
            "id": 4,
            "displayName": "child1 of 01",
            "parentId": 1
        },
        {
            "id": 5,
            "displayName": "child0 of 02",
            "parentId": 2
        }
    ];
    $scope.filteredArray = [];
    $scope.$watch("parentId", function (newValue) {
        $scope.filteredArray = filterFilter($scope.childItems, newValue);
        $scope.selectedChildItem = $scope.filteredArray[0];
    },true);
    

    $scope.grandChildItems = [
        {
            "id": 0,
            "displayName": "grandChild0 of 00",
            "parentId": 0
        },
        {
            "id": 1,
            "displayName": "grandChild1 of 00",
            "parentId": 0
        },
        {
            "id": 2,
            "displayName": "grandChild2 of 00",
            "parentId": 0
        },
        {
            "id": 3,
            "displayName": "grandChild0 of 01",
            "parentId": 1
        },
        {
            "id": 4,
            "displayName": "grandChild1 of 01",
            "parentId": 1
        },
        {
            "id": 5,
            "displayName": "grandChild0 of...