angular2 remove or disable select option from secondary select element

Question

I'm working on an angular 2 prototype component. I have two select controls that have the same options. In the second select element (destination) I would like to disable or remove the option that was selected in the first select element (origin). (Incidentally, any idea why the first selected option is displaying?)

Here is the plunkr

 //our root app component
 import {Component} from '@angular/core';
 import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from '@angular/common';

 @Component({
   selector: 'my-app',
   providers: [],
   template: `
    <div>
     <h2>{{name}}</h2>
       <select id="trip_origin" [(ngModel)]="origin" 
       class="start" (change)="onChange($event)">
       <option disabled selected >Select a shipping origination</option>
       <option *ngFor="let item of items" [ngValue]="item"> {{item.name}} - {{item.loc}}</option>
      </select>
      <div>selected: {{origin | json}}</div>
      <hr>
      <select id="trip_destination" name="destination" [(ngModel)]="destination">
       <option *ngFor="let item of items" [ngValue]="item">{{item.name}} - {{item.loc}}</option>
      </select>
      <div>selected: {{destination | json}}</div>
   </div>

    <h2>Destination -- {{destination.loc}}</h2>
    <h2>Origin -- {{origin.loc}}</h2>

  `,
 directives: []
})

export class App {

 public items:object[] = [
  {"loc":"HOU","name":"Houston"},
  {"loc":"DAL","name":"Dallas"},
  {"loc":"SAT","name":"San Antonion"}
 ];

 constructor() {
  this.origin={};
  this.name = 'Test Select Control'
  this.destination = this.items[1] 
 }
 onChange($event){
     console.log($event)
 }
}

Dethariel · Accepted Answer · 2016-07-29 20:52:35Z

You can disable the option by simply binding to the [disabled] DOM attribute:

<select id="trip_destination" name="destination" [(ngModel)]="destination">
  <option [disabled]="item === origin" *ngFor="let item of items" [ngValue]="item">{{item.name}} - {{item.loc}}</option>
          ^^^^^^^^^^
</select>

This will make the currently selected "Origin" value disabled in the "Destination" selector (see plunker)

As to your other mini-question, which I read as "Why the first option is not displayed?". That's probably due to the fact that "trip_origin" is bound to [(ngModel)]="origin". You set this.origin = {} in the component's constructor. There's no corresponding object in this.items, so Angular does not know how to bind to this value. You can change this option to be

<option selected disabled [ngValue]="none">Select a shipping origination</option>

and change the ctor to have the line

this.origin=this.none={};

Then it's displayed as expected (see here)

burgula shyam · Accepted Answer · 2018-09-28 08:22:53Z

0

template:
    <select class="form-control" (change)="change($event)">
     <option  selected disabled>Select</option>
    <option value="{{ele.name}}" *ngFor="let ele of selectList" [disabled]="ele.isdisabled">
       {{ele.name}}
     </option>
      </select>
 <button type="button" class="btn btn-primary btn-sm" (click)="resetOptions()">Reset</button>
ts file:
selectList: any = [
   { 
     "name":"Name",
    "isdisabled":false
  },
    { 
      "name":"DIN",
      "isdisabled":false
  },
    { 
      "name":"Mobile",
      "isdisabled":false
  }
  ]

change(event) {
    this.selectList.forEach(element => {
      if(event.target[event.target.options.selectedIndex].value===element.name){
        element.isdisabled=true;
      }
    });
  }

to reset:
 resetOptions(){
   $('select').prop('selectedIndex', 0);
   this.selectList.forEach(element => {
     element.isdisabled=false;
   });
  }

answered Sep 28, 2018 at 8:22

burgula shyam

311 silver badge2 bronze badges

1 Comment

Raman Mishra Over a year ago

can you please add some comments how your answer is solving the problem. It will be easier for the author to understand what was the issue.

Collectives™ on Stack Overflow

angular2 remove or disable select option from secondary select element

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related