CODEWITHSUNDEEP
jqueryangularjs
Nikki
Nikki

Reputation: 79

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.

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

Please refer Plunker link

Appreciate your help.

Upvotes: 0

Views: 127

Answers (1)

ChiefTwoPencils
ChiefTwoPencils

Reputation: 13940

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

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>

Upvotes: 1

Related Questions