AngularJS中无法根据第一个下拉框选择设置第二个下拉框选中值

我来帮你搞定这个联动选中的问题！从你给出的代码来看，核心问题应该是第一个下拉框变化时，没有正确更新第二个下拉框的ng-model值，另外还要注意track by指令的使用细节，以及如果用了第三方下拉插件的话还需要额外处理。

先看核心修复步骤： #

1. 完善控制器中的onselectClick函数

你需要在这个函数里，根据第一个下拉框选中的selectedOption，找到第二个下拉框中对应的选项，然后赋值给selectedSecondOption。比如假设你的第二个选项和第一个选项是通过parentId关联的，控制器代码可以这样写：

angular.module('yourAppName', [])
.controller('yourController', function($scope, $timeout) {
  // 第一个下拉框的选项数据
  $scope.options = [
    {id: 1, name: '选项A'},
    {id: 2, name: '选项B'},
    {id: 3, name: '选项C'}
  ];

  // 第二个下拉框的选项数据，假设用parentId关联第一个选项的id
  $scope.secondoptions = [
    {id: 10, name: 'A子选项1', parentId: 1},
    {id: 11, name: 'A子选项2', parentId: 1},
    {id: 20, name: 'B子选项1', parentId: 2},
    {id: 30, name: 'C子选项1', parentId: 3}
  ];

  // 默认选中第一个选项
  $scope.selectedOption = $scope.options[0];

  // 第一个下拉框变化时的处理逻辑
  $scope.onselectClick = function() {
    // 根据选中的第一个选项id，匹配第二个下拉框的对应选项
    const matchedOption = $scope.secondoptions.find(item => item.parentId === $scope.selectedOption.id);
    // 给第二个下拉框的ng-model赋值
    $scope.selectedSecondOption = matchedOption;

    // 如果你用了bootstrap-select这类插件，需要刷新插件才能同步视图
    $timeout(() => {
      $('.selectpicker').selectpicker('refresh');
    });
  };

  // 页面初始化时触发一次，设置第二个下拉框的默认选中值
  $scope.onselectClick();
});

2. 修正HTML中的第二个下拉框代码

确保第二个下拉框的ng-model完整，并且和控制器中的变量对应：

<div ng-app="yourAppName" ng-controller="yourController">
  <select 
    data-ng-options="o.name for o in options track by o.id" 
    data-ng-model="selectedOption" 
    class="selectpicker" 
    data-style="btn-default" 
    ng-change="onselectClick()">
  </select>

  <!-- 第二个下拉框 -->
  <select 
    data-ng-options="o.name for o in secondoptions track by o.id" 
    data-ng-model="selectedSecondOption"
    class="selectpicker" 
    data-style="btn-default">
  </select>
</div>

关键注意点： #

• track by的匹配逻辑：因为你用了track by o.id，AngularJS会通过id来识别选项，所以你赋值给selectedSecondOption的对象，必须是secondoptions数组中存在的对象（或者直接赋值对应的id，但这时候需要调整ng-options的写法，比如o.name as o.name for o in secondoptions track by o.id，然后ng-model绑定selectedSecondId）。
• 第三方下拉插件的刷新：如果你用了selectpicker（bootstrap-select），AngularJS更新模型后，插件不会自动同步视图，所以需要用$timeout延迟调用selectpicker('refresh')，确保DOM更新后再刷新插件。
• 初始化触发：页面加载时要手动调用一次onselectClick，这样第二个下拉框默认就会有选中值，而不是空的。

内容的提问来源于stack exchange，提问作者Jignesh M. Mehta