首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何在其他选择下拉列表中隐藏特定的选定选项

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

Stack Overflow用户
提问于 2016-12-31 16:12:10
回答 1查看 118关注 0票数 0

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

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

在这里共享柱塞链接:http://plnkr.co/edit/9G7BCyK37CNf6RWjU9Cz?p=preview

代码语言:javascript
运行
复制
Please refer Plunker link

感谢你的帮助。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-12-31 19:40:39

我建议您依赖Angular来完成此操作,而不必直接使用jQuery

您可以做的是拥有一个所有选项的主列表,并为选择维护两个单独的列表。当选择发生变化时,您将重新生成列表。这里的示例不是基于柱塞中的代码,而是基于PoC。您应该注意的是,一个选择列表中的选定选项不能是另一个选择列表中的选项。

代码语言:javascript
运行
复制
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);
    };
  });
代码语言:javascript
运行
复制
<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>

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/41409927

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档