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

我正试图根据在其他下拉列表中所做的选择从下拉列表中删除选项

例如，在页面加载时，我有一个下拉列表，和一个允许创建另一个下拉列表的按钮

我的操作代码：

预期结果：

如果只有一个下拉列表，用户可以选择其中的任何选项，并且不需要执行其他逻辑

但是，如果单击“新建端口”按钮，它将创建与第一个、第二个等相同选项的其他下拉列表。。。 我想做的是从那些没有选择选项的下拉列表中删除在任何下拉列表中选择的选项，以防止重复选择

例如，如果我有3个下拉列表，所有下拉列表的可用选项是D1、D2和D3；用户选择D1作为第一个选项，这将从下拉列表2和3中删除选项D1。D2在第二个选项中被选中，这将从下拉列表1和3中删除D2，使下拉列表3只剩下一个D3选项

---

指向我的代码的链接：

我已经为您提供了一个插件，我想我有些东西应该适合您

重要的一点是，我更改了ng选项，根据您当前查看的索引使用经过筛选的端口列表。我更改了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>

注意，我还定义了一个数组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);
}

最后，以防万一，我添加了一个ng click处理程序来处理任何重复项，但这不可能，所以可能会被忽略

---

为了解释为什么它首先不起作用，以及这里的主要区别是什么，您更改了$scope变量，所有的s都是从中提取的-您希望对每个变量分别进行更改，我在这里通过将索引变量传递给函数来实现这一点。

您能详细说明预期的结果吗？目前，D1正在从两个选项中消失。你想让D1保留旧选项，但不保留新选项？@NagasimhaIyengar，我想让D1保留旧选项，但不保留新选项。谢谢，@Carson Moore。它工作得很好。你的解决方案我无法想象。

$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"
  });

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

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