Question

我有3个下拉列表，A，B，C。
根据下拉菜单选择，下拉列表B 将被填充。
然后根据下拉B 选择，下拉列表将被填充。

我能够实现前两个步骤。但我无法达到第三点。

jsfiddle link

Answer 1

怎么样？

<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

Answer 2

您忘记调用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>

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

Answer 3

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

第1步：在下拉列表中添加更改触发器：

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

步骤2：在控制器上添加一个功能，以更新下拉列表C的选项：

// DOM Ready 
$('input#PHONE_FIELD_ID').on('change', function () {      
    handlePhoneValidation();
    return false;
});

 var clickAttr = $("#SAVE_BUTTON_ID").attr("onclick"); 
 $("#SAVE_BUTTON_ID").attr("onclick","return handlePhoneValidation(); "+clickAttr);


function handlePhoneValidation(){

    clear_all_errors();

    var node = $('input#PHONE_FIELD_ID');
        current_val = node.val();

   /*
    * Your validation will go here
    * if condition fail then return false otherwise true 
   */

    return false;
}

我已相应地更新了你的小提琴：http://jsfiddle.net/Xku9z/1196/

Answer 4

如果我是你，我会改变你的下拉来调用不同的功能。这样您就不必在需要之前设置第三组选项。已验证它适用于JSFiddle。

而不是..

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

并确保您调用data-ng-change =＆＃34; getOptions3（）＆＃34;在你的第二个选择标签上。

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

4 个答案: