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($index)">
  </select>
  <select data-ng-model="option2" data-ng-options="option for option in options2" data-ng-show='options2.length' data-ng-change="getOptions3()">
  </select>{{option2}}
  <select data-ng-model="option3" data-ng-options="option for option in options3" data-ng-show='options3.length' ng-change="onOption3Change()">
  </select>
  <hr>
  <select ng-if="showDropDownOptions[selectC].indexOf(1) != '-1' && selectC && opt1.length>0" ng-model="obj.selectedName245" ng-options="x for x in opt1">
  </select>
  <select ng-if="showDropDownOptions[selectC].indexOf(2) != '-1' && selectC && opt2.length>0" ng-model="obj.selectedName64" ng-options="x for x in opt2">
  </select>
  <select ng-if="showDropDownOptions[selectC].indexOf(3) != '-1' && selectC && opt3.length>0" ng-model="obj.selectedName321" ng-options="x for x in opt3">
  </select>
  <select ng-if="showDropDownOptions[selectC].indexOf(4) != '-1' && selectC && opt4.length>0" ng-model="obj.selectedName34" ng-options="x for x in opt4">
  </select>
  <select ng-if="showDropDownOptions[selectC].indexOf(5) != '-1' && selectC && opt5.length>0" ng-model="obj.selectedName21" ng-options="x for x in opt5">
  </select>
  <select ng-if="showDropDownOptions[selectC].indexOf(6) != '-1' && selectC && opt6.length>0" ng-model="obj.selectedName12" ng-options="x for x in opt6">
  </select>
  <select ng-if="showDropDownOptions[selectC].indexOf(7) != '-1' && selectC && opt7.length>0" ng-model="obj.selectedName222" ng-options="x for x in opt7">
  </select>
  <select ng-if="showDropDownOptions[selectC].indexOf(8) != '-1' && selectC && opt8.length>0" ng-model="obj.selectedName22" ng-options="x for x in opt8">
  </select>
  <select ng-if="showDropDownOptions[selectC].indexOf(9) != '-1' && selectC && opt9.length>0" ng-model="obj.selectedName2" ng-options="x for x in opt9">
 ...

JavaScript

var option1Options = ["Men", "women", "kids"];
var option2Options = [
  ["m-top", "m-bottom", "m-f0otwear"],
  ["w-top", "w-bottom", "w-footwear"],
  ["k-top", "k-bottom", "k-footwear"]
];
var option3Options = [
  ["m-Shirt", "m-t-shirt"],
  ["m-jeans", "m-trousers"],
  ["m-chapals", "m-formal shoes"],
  ["w-Shirt", "w-t-shirt"],
  ["w-jeans", "w-trousers"],
  ["w-chapals", "w-formal shoes"]

];

function myCtrl($scope) {
  $scope.opt1 = ["opt1", "opt2", "opt3"];
  $scope.opt2 = ["opt1", "opt2"];
  $scope.opt3 = ["opt1", "opt2"];
  $scope.opt4 = ["opt1", "opt2"];
  $scope.opt5 = ["opt1", "opt2"];
  $scope.opt6 = ["opt1", "opt2"];
  $scope.opt7 = ["opt1", "opt2"];
  $scope.opt8 = ["opt1", "opt2"];
  $scope.opt9 = ["opt1", "opt2"];
  $scope.opt10 = [];

  $scope.onOption3Change = function() {
    $scope.obj = {};

    $scope.selectC = $scope.options3.indexOf($scope.option3)

  }
  $scope.showDropDownOptions = [];
  $scope.showDropDownOptions[0] = [2, 3, 6];
  $scope.showDropDownOptions[1] = [1, 4];
  $scope.showDropDownOptions[2] = [5, 9, 10, 7];
  $scope.showDropDownOptions[3] = [8, 10];

  //$scope.second[0] = [1];
  $scope.obj = {};



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

    $scope.options2 = option2Options[option1Options.indexOf($scope.option1)];
    $scope.getOptions3();
  };

  $scope.getOptions3 = function() {
    var mergedOptions2 = [].concat.apply([], option2Options)
    $scope.options3 = option3Options[mergedOptions2.indexOf($scope.option2)];
  }
}