如何在其他选择下拉菜单中隐藏特定的选定选项 [英] how to hide specific selected options in other select dropdown

问题描述

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

I have two select drop downs with same options. The first drop down default selected option should be "Public Address" and second drop down default selected option should be "Add address".

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

I should allow to enter "Public Address / Worker Address" only once. So I need to hide "Public Address" option in second drop down on page load. And allow user to choose ""Public Address / Worker Address" option only once from either drop downs.

此处共享了Plunker链接: http://plnkr.co/edit/9G7BCyK37CNf6RWjU9Cz?p=预览

Here sharing Plunker link: http://plnkr.co/edit/9G7BCyK37CNf6RWjU9Cz?p=preview

Please refer Plunker link

感谢您的帮助.

推荐答案

我建议您依靠Angular来执行此操作，而不必使用jQuery，这是不必要的.

I would suggest you rely on Angular to do this and forget about using jQuery directly as it's not necessary.

您可以做的是拥有所有选项的主列表，并为选择项维护两个单独的列表.选择更改后，您将重建列表.这里的示例不是基于您的插件中的代码，而是基于PoC.您应该注意的是，一个选择列表中的所选选项不能是另一选择列表中的选项.

What you can do is have a main list of all the options and maintain two separate lists for the selects. When the selection changes you'll rebuild the lists. The example here isn't based on the code in your plunker but rather a PoC. What you should notice is the selected option in one select list cannot be an option in the other.

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>

这篇关于如何在其他选择下拉菜单中隐藏特定的选定选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！