javascript - 用户选择其他选项时如何删除选项

我正在尝试根据其他下拉菜单中的选择从下拉菜单中删除选项。

例如，在页面加载时，我有一个下拉菜单，以及一个允许创建另一个下拉菜单的按钮。

我的操作代码：

<div class="form-inline" ng-repeat="setting in sensor.settings">
<select class="form-control" ng-model="setting.port" ng-options="item.name group by item.type for item in ports track by item.name">
  <option value="">-- Module Port --</option>
</select>
</div>

<a href ng-click="newItem($event, sensor.settings)">New Port</a>

预期结果：

如果只有一个下拉菜单，则用户可以选择其中的任何选项，而无需执行其他逻辑。

但是，如果单击“新端口”按钮，则会创建其他下拉菜单，并具有与第一个，第二个等相同的选项。
我要做的是从未从中选择任何下拉菜单的选项中删除选择的选项，以防止重复选择。

例如，如果我有3个下拉菜单，而所有下拉菜单的可用选择为D1，D2和D3；用户为第一个选择D1，从下拉列表2和3中删除选项D1。第二个选择D2，从下拉列表1和3中删除D2，仅选择D3留下下拉列表3。

Here's指向我的代码的链接：

最佳答案

我已经分叉了您的朋克，我想我应该为您提供一些帮助。

重要的部分是，我根据您当前正在查看的索引，将ng-options更改为使用过滤后的端口列表。（我将ng-repeat更改为也跟踪索引）：

<div class="form-inline" ng-repeat="(index, setting) in sensor.settings">
  <select class="form-control" ng-model="setting.port" ng-options="item.name group by item.type for item in filteredPorts(index) track by item.name" ng-change="updateAll(index)">
    <option value="">-- Module Port --</option>
  </select>
</div>

然后，我将filteredPorts实现为一个函数，该函数接受索引并过滤掉所有其他选定的端口，并仅返回这些端口作为可能的选项：

$scope.filteredPorts = function(index) {
  // Filter out anything that's currently selected elsewhere
  var currentSelections = [];
  $scope.sensor.settings.forEach(function(value, idx) {
    if (index !== idx) { currentSelections.push(value.port); } // if statement enforces "elsewhere"
  });

请注意，我还定义了一个数组diff方法，用于上面的代码：

Array.prototype.diff = function(a) {
  return this.filter(function(i) {return a.indexOf(i) < 0;});
}; // from http://stackoverflow.com/questions/1187518/javascript-array-difference

  return $scope.ports.diff(currentSelections);
}

我还更改了newItem函数以仅创建一个新项目而不进行任何过滤：

$scope.newItem = function($event, sensorSetting) {
  $scope.sensor.settings.push({
    port: '',
    room: '',
    device: ''
  });
  $event.preventDefault();
}

最后，以防万一，我添加了一个ng-click处理程序来处理所有重复项，但这不可能，因此可以忽略。

为了解释为什么它首先不起作用以及这里的主要区别是什么，您正在更改从中提取所有$scope的<select>变量-您想分别为每个变量进行更改，这是通过将index变量传递给函数来完成的。