-1


  • I have 3 dropdowns, A, B, C.
  • Based on dropdown A selection, dropdown B will be filled.
  • Then based on dropdown B selection, dropdown C will be filled.

    I am able to achieve first 2 steps. But I am unable to achieve third point.

    jsfiddle link
mayank bisht
  • 784
  • 9
  • 19

4 Answers4

1

What about

<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>
  <select data-ng-model="option3" data-ng-options="option for option in options3" data-ng-show='options3.length'>
  </select>
</div>


function myCtrl($scope) {
  $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)];
  }
}

Working fiddle

jitender
  • 10,238
  • 1
  • 18
  • 44
  • Thanks for posting the answer, but when I select option 1 from dropdown A, then it's filling dropdown B with option 1 selection, similarly it should do for dropdown C. In your `working fiddle`, when I select any `option` from dropdown C, then again dropdown c is getting filled with some other values? – mayank bisht Nov 24 '17 at 07:37
  • : Thanks a lot, it's working like charm now. But how can I pass the last dropdown option to dynamically generate other dropdowns.You already helped me with problem, but now when I tried to integrate with todays code, it's not working, please help. `fiddle link: http://jsfiddle.net/mayankBisht/1o57qac2/2/` – mayank bisht Nov 24 '17 at 10:19
  • Check out [this fiddle](http://jsfiddle.net/r2w0yp6d/1/) if this solved your problem http://jsfiddle.net/r2w0yp6d/1/ you can mark it as an accepted answer – jitender Nov 24 '17 at 10:31
  • Hi, again thanks for the answer, but it's not working as expected when I am selecting `women` - `w-top` - ``, `it's` showing `mens` options. updated fiddle `http://jsfiddle.net/mayankBisht/r2w0yp6d/3/` – mayank bisht Nov 24 '17 at 11:18
  • 1
    Then you have to [Flatten out](https://stackoverflow.com/a/10865042/5621827) second array check this working fiddle http://jsfiddle.net/r2w0yp6d/4/ – jitender Nov 24 '17 at 11:41
  • Hmm, now dropdowns are working perfect, but `` is not correctly populating new dynamic dropdowns. It is always showing same dropdowns.I mean when I select option 1 from all the 3 dropddowns, then it should show 3 dropdowns because we have defined 3 for this index ` $scope.showDropDownOptions[0] = [2, 3, 6];` – mayank bisht Nov 24 '17 at 12:45
  • what would happen if you select first index from first dropdown and second index from second and third one also i think you current problem is solved you can ask other so question for that – jitender Nov 24 '17 at 13:02
  • Hmm, actually there are 2 scenarios, first is for 3 dropdowns, you can understand them as *main category*, *sub-category*,*sub-sub category*.Second part is when user selects *sub-sub category option*, then dropowns will be generated.So when i select `option 1` from the last dropdown, then according to our logic this line should fire ` $scope.showDropDownOptions[0] = [2, 3, 6];`, so we are expecting 3 dropdowns with index 2,3,6 to appear. – mayank bisht Nov 24 '17 at 13:07
0

You have forget to call getOption2() function for fetching option3

<select data-ng-model="option2" data-ng-options="option for option in options2" data-ng-show='options2.length' data-ng-change="getOptions2()">
</select>

Fiddler http://jsfiddle.net/Xku9z/1198/

Kanya Ravi
  • 101
  • 1
  • 1
  • 10
0

You are unable to achieve third point because you are trying to do that when dropdown A has a value, not B. If you add a new trigger on B, with the same functionality related to B, it will work.

Step 1: Add change trigger to your dropdown:

<select data-ng-model="option2" data-ng-options="option for option in options2" data-ng-show='options2.length' data-ng-change="getOptions3()">

Step2: Add a function on your controller to update options for dropdown C:

$scope.getOptions3 = function() {
    var key2 = $scope.options2.indexOf($scope.option2);
    var myNewNewOptions = option3Options[key2];
    $scope.options3 = myNewNewOptions;
};

I've updated your fiddle accordingly: http://jsfiddle.net/Xku9z/1196/

Mihai Ionut Ioan
  • 11
  • 4
0

If I were you I would change your drop downs to call different functions. That way you aren't setting the third set of options before you need to. Verified it works on JSFiddle.

Instead of..

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;
  };
}

Use this...

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 myNewOptions = option2Options[key];
    $scope.options2 = myNewOptions;
  };
    $scope.getOptions3 = function() {
    var key2 = $scope.options2.indexOf($scope.option2);
    var myNewNewOptions = option3Options[key2];
    $scope.options3 = myNewNewOptions;
  };
}

And make sure you call data-ng-change="getOptions3()" on your second select tag.

Rmalmoe
  • 993
  • 11
  • 13