Javascript 无法使用angularJs动态填充下拉列表

• 我有3个下拉列表，

  A

  ，

  B

  ，

  C

• 根据下拉列表A的选择，将填充下拉列表B
• 然后根据下拉列表B选择，将填充下拉列表C。
  
  我能够完成前两个步骤。但我无法达到第三点。
  
  

那怎么办

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

函数myCtrl（$scope）{
$scope.options1=option1Options；
$scope.options2=[]；//稍后我们将获取这些
$scope.options3=[]；
$scope.getOptions2=函数（）{
$scope.options2=option2Options[option1Options.indexOf$scope.option1]；
$scope.getOptions3（）；
};
$scope.getOptions3=函数（）{
var mergedOptions2=[].concat.apply（[]，选项2选项）
$scope.options3=option3Options[mergedOptions2.indexOf（$scope.option2）]；
}
}

---

您忘记调用getOption2（）函数来获取option3

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

小提琴手

---

您无法达到第三点，因为当下拉列表A有值而不是B时，您正试图达到第三点。如果您在B上添加一个新触发器，并且具有与B相关的相同功能，则它将起作用

步骤1：将更改触发器添加到下拉列表中：

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

---

我相应地更新了您的小提琴：

如果我是您，我会更改您的下拉列表以调用不同的函数。这样，您就不会在需要之前设置第三组选项。 验证了它在JSFIDLE上工作

而不是

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

用这个

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

---

并确保在第二个select标记上调用data ng change=“getOptions3（）”。

选择后需要填写什么？下拉列表中应填写选项，显示在角度控制器中。感谢您发布答案，但当我从下拉列表A中选择选项1时，它将用选项1选项填充下拉列表B，同样，下拉列表C也应该如此。在您的

工作小提琴中，当我从下拉列表C中选择任何
选项时，下拉列表C又被其他值填充了吗？：非常感谢，它现在工作得很好。但我如何传递最后一个下拉选项来动态生成其他下拉列表。您已经帮助我解决了这个问题，但现在当我尝试与今天的代码集成时，它不起作用，请帮助<代码>小提琴链接：http://jsfiddle.net/mayankBisht/1o57qac2/2/
检查这是否解决了您的问题您可以将其标记为已接受的答案HI，再次感谢您的回答，但当我选择
女性
-
w-top
-```，
它显示了
男性
选项时，它并没有按预期工作。更新的小提琴
http://jsfiddle.net/mayankBisht/r2w0yp6d/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 myNewOptions = option2Options[key];
    $scope.options2 = myNewOptions;
  };
    $scope.getOptions3 = function() {
    var key2 = $scope.options2.indexOf($scope.option2);
    var myNewNewOptions = option3Options[key2];
    $scope.options3 = myNewNewOptions;
  };
}