如何在其他选择下拉菜单中隐藏特定的选定选项答案

【问题标题】：how to hide specific selected options in other select dropdown如何在其他选择下拉菜单中隐藏特定的选定选项
【发布时间】：2016-12-31 16:12:10
【问题描述】：

我有两个具有相同选项的选择下拉菜单。第一个下拉默认选择的选项应该是“公共地址”，第二个下拉默认选择的选项应该是“添加地址”。

我应该只允许输入一次“公共地址/工人地址”。所以我需要在页面加载的第二个下拉菜单中隐藏“公共地址”选项。并允许用户从任一下拉菜单中仅选择一次“公共地址/工人地址”选项。

这里分享Plunker链接：http://plnkr.co/edit/9G7BCyK37CNf6RWjU9Cz?p=preview

Please refer Plunker link

感谢您的帮助。

【问题讨论】：

你的想法是错误的。您不能在所有浏览器中隐藏<option> 标签，某些浏览器不支持它。你想要一个过滤器
如果它在现代浏览器中的支持我很好。如果您能分享其他可能的选项/解决方案来满足我的要求，那将是非常有帮助的。
对于初学者来说，缩小演示规模，因此它只包括<select> 的基础知识......如minimal reproducible example。所有其他的东西都与问题无关
更新的 Plunker 链接仅包含与问题相关的代码

标签： jquery angularjs

【解决方案1】：

我建议您依靠Angular 来执行此操作，而不要直接使用jQuery，因为它没有必要。

您可以做的是拥有所有选项的主列表，并为选择维护两个单独的列表。 When the selection changes you'll rebuild the lists.这里的示例不是基于 plunker 中的代码，而是基于 PoC。您应该注意的是，一个选择列表中的选定选项不能是另一个选择列表中的选项。

angular.module('app', [])
  .controller('controller', function() {
    var self = this;
    self.mainList = [{
      name: 'Public'
    }, {
      name: 'Private'
    }, {
      name: 'Protected'
    }, {
      name: 'Super'
    }, {
      name: 'Awesome'
    }, ];
    self.lists = [
      [],
      []
    ];
    self.selections = [self.mainList[0], self.mainList[1]];
    self.buildList = function(which, other) {
      self.lists[which] = [];
      self.mainList.forEach(function(e) {
        if (e.name !== self.selections[other].name) {
          self.lists[which].push(e);
        }
      });
    };
    self.buildLists = function() {
      self.buildList(0, 1);
      self.buildList(1, 0);
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="controller as c" ng-init="c.buildLists()">
  <label>First</label>
  <select ng-model="c.selections[0]" ng-change="c.buildLists()" 
          ng-options="o.name for o in c.lists[0]">
  </select>
  <label>Second</label>
  <select ng-model="c.selections[1]" ng-change="c.buildLists()" 
          ng-options="o.name for o in c.lists[1]">
  </select>
</div>

【讨论】：