如何在其他选择下拉列表中隐藏特定的选定选项

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

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

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

Please refer Plunker link 

感谢您的帮助。

Answer 1

我建议你依靠Angular来做这件事而忘记直接使用jQuery ，因为它没有必要。

您可以做的是拥有所有选项的主列表，并为选择维护两个单独的列表。 选择更改后，您将重建列表。 这里的示例不是基于您的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); }; }); 

   
 First   Second