JSFiddle - React, Tailwind, and code Playground

by Mayank Bisht

HTML

<div data-ng-app data-ng-controller="myCtrl">
  <select data-ng-model="option1" data-ng-options="option for option in options1" data-ng-change="getOptions2()">
  </select>
  <select data-ng-model="option2" data-ng-options="option for option in options2" data-ng-show='options2.length'>
  </select>
  <select data-ng-model="options3" data-ng-options="option for option in options3" data-ng-show='options3.length'>
  </select>
</div>

JavaScript

var option1Options = ["option1 - 1", "option1 - 2", "option1 - 3"];
var option2Options = [
  ["option2 - 1-1", "option2 - 1-2", "option2 - 1-3"],
  ["option2 - 2-1", "option2 - 2-2", "option2 - 2-3"],
  ["option2 - 3-1", "option2 - 3-2", "option2 - 3-3"]
];
var option3Options = [
  ["option3 - 1-1", "option3 - 1-2", "option3 - 1-3"],
  ["option3 - 2-1", "option3 - 2-2", "option3 - 2-3"],
  ["option3 - 3-1", "option3 - 3-2", "option3 - 3-3"]
];

function myCtrl($scope) {
  $scope.options1 = option1Options;
  $scope.options2 = []; // we'll get these later
  $scope.options3 = [];
  $scope.getOptions2 = function() {

    var key = $scope.options1.indexOf($scope.option1);
    var key2 = $scope.options2.indexOf($scope.option2);
    var myNewOptions = option2Options[key];
    var myNewNewOptions = option3Options[key2];
    $scope.options2 = myNewOptions;
    $scope.options3 = myNewNewOptions;
  };
}