如何在其他选择下拉列表中隐藏特定的选定选项
我有两个具有相同选项的选择下拉菜单。 第一个下拉默认选择选项应为“公共地址”,第二个下拉默认选择选项应为“添加地址”。
我应该只允许输入一次“公共地址/工作人员地址”。 因此,我需要在页面加载的第二个下拉列表中隐藏“公共地址”选项。 并允许用户从任一下拉菜单中选择“”公共地址/工作人员地址“选项一次。
在这里分享Plunker链接: http ://plnkr.co/edit/9G7BCyK37CNf6RWjU9Cz?p = preview
Please refer Plunker link
感谢您的帮助。
我建议你依靠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); }; });