如何使已选择的选项不显示在另一个选择选项下拉 JAVASCRIPT/ANGULARJs

Posted 2023-05-08

【中文标题】如何使已选择的选项不显示在另一个选择选项下拉 JAVASCRIPT/ANGULARJs

【英文标题】：How to make already selected option not display in another select option dropdown JAVASCRIPT/ANGULARJs

【发布时间】：2020-07-22 05:09:39

【问题描述】：

如何使选择选项在被过滤后不会消失并且不会显示在其他选择下拉列表中。 例如 如果我有一些对象数组，并且我制作了

<select ng-options = "here we go through each object "></select>

我的想法是制作过滤器功能，如果我之前选择了这个项目，它不会显示我正在填充的数组中的任何项目。所以这将是我在另一个下拉列表中应该不可用的项目数组。有没有一些示例方法我可以如何做到这一点？我有一个想法，我的过滤器看起来像这样：

  for(var i=0;i<$scope.removedIds.length;i++)
    if(tab.tabID===$scope.removedIds[i].tabID)
      return false;
  
  return tab;

这将在 ng-options 中使用，例如：ng-options="tab.ID as tab.name for tab in tables | filter:" 在我的函数 ng-change 中，我将向 $scope.removedIds 添加下一个值，这些值在下一个选择下拉列表中不应该可用。但我认为它不起作用，因为值会在不同的选择下拉列表中被过滤掉。

Example

【问题讨论】：

检查我的答案，如果是，则标记为已回答。

【参考方案1】：

我猜你有三个具有相同数据源的下拉菜单，一个简单的解决方案如下所示：

<div>
    <select ng-model="selectedItem1" ng-options="item1 for item1 in options1"></select>
    <select ng-model="selectedItem2" ng-options="item2 for item2 in options2"></select>
    <select ng-model="selectedItem3" ng-options="item3 for item3 in options3"></select>
</div>

在相应的控制器中，并使用 angularjs 观察者，添加这些行：

$scope.options1 = ["opt1","opt2","opt3"];
$scope.options2 = angular.copy($scope.options1);
$scope.options3 = angular.copy($scope.options1);

$scope.$watch("selectedItem1", function(nv, ov) 
    if (nv != ov) 
        $scope.options2.splice($scope.options2.indexOf(nv),1);
        $scope.options3.splice($scope.options3.indexOf(nv),1);
    
);
$scope.$watch("selectedItem2", function(nv, ov) 
    if (nv != ov) 
        $scope.options1.splice($scope.options1.indexOf(nv),1);
        $scope.options3.splice($scope.options3.indexOf(nv),1);
    
);
$scope.$watch("selectedItem3", function(nv, ov) 
    if (nv != ov) 
        $scope.options1.splice($scope.options1.indexOf(nv),1);
        $scope.options2.splice($scope.options2.indexOf(nv),1);
    
);