Change dropdown options based on another dropdown angular

Question

I'm working on a reservation site where I have two select dropdown boxes with 3 identical city names. Depending on the choices in first dropdown, I want the second to adjust in a way that it's not possible to have equal values.

HTML:

<h4>Airport of Departure</h4>
    <select name="" id="">
      <option [value]="city" *ngFor="let city of opts">
        {{city.key}}
      </option>
    </select>

    <!-- chosen destination -->

    <h4>Destination (must be different than departure location)</h4>
    <select name="" id="">
      <option [value]="city" *ngFor="let city of opts">
        {{ city.key }}
      </option>
    </select>

COMPONENT.TS:

public cities = ["Warsaw", "Paris", "New York"];
  public opts = [
    { key: "Warsaw", value: ["paris,new york"] },
    { key: "Paris", value: ["warsaw,new york"] },
    { key: "New York", value: ["warsaw, paris,"] }
  ];

STACKBLITZ: https://stackblitz.com/edit/flight-date-pikcer

I am having trouble figuring out the way to make this work. Thank you for your support!

do u want to set second id value inculdes in first dropdown's selected value — Cagri Tacyildiz
– Cagri Tacyildiz, Commented Jun 15, 2020 at 15:55
you need two options source/destinations, bound to lists. When the first is selected send event to remove that city from the 2nd. — JWP
– JWP, Commented Jun 15, 2020 at 15:59

Cagri Tacyildiz · Accepted Answer · 2020-06-15 16:45:37Z

1

Demo There is no rule all planes goes everywhere from one destination than using values is better than using keys.

You can use custom pipe for second dropdown that check values array with case sensetive then filter it

in html just give first dropdown a [(ngModel)] two way binding

for second html use pipe

 <option [value]="city.key" *ngFor="let city of opts | departure : dept">

your custom pipe

import { Pipe, PipeTransform } from "@angular/core";
@Pipe({
      name: "departure"
})
export class DeparturePipe implements PipeTransform {
   transform(value: any[], dept:string): any {
     return value.filter(x=> !dept || x.value[0].split(",").indexOf( dept.toLowerCase())>-1 )
   }
}

edited Jun 15, 2020 at 16:45

answered Jun 15, 2020 at 16:19

Cagri Tacyildiz

17.7k6 gold badges38 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Eliseo · Accepted Answer · 2020-06-15 16:56:51Z

if you has only a few elements, you can use [ngValue], but first you need change your "options" like

public opts = [
    { key: "Warsaw", value: ["paris","new york"] },
    { key: "Paris", value: ["warsaw","new york"] },
    { key: "New York", value: ["warsaw", "paris"] }
  ];

See that value is an array of string, not an array of an unique string as you has (I suppose is a typo error). then you can use simple

<select [(ngModel)]="departure">
      <option [ngValue]="city" *ngFor="let city of opts">
        {{city.key}}
      </option>
</select>

<select >
      <option [value]="city" *ngFor="let city of departure?.value">
        {{ city }}
      </option>
</select>

But, be carefull, "departure" get the value of the all object, e.g. has the value { key: "Warsaw", value: ["paris","new york"] }

Aakash Garg · Accepted Answer · 2020-06-15 15:59:05Z

0

Bind first Dropdown To a property Departure

<h4>Airport of Departure</h4>
    <select name="" id="" [(ngModel)] = "departure">
      <option [value]="city.key" *ngFor="let city of opts">
        {{city.key}}
      </option>
    </select>

In Typescript

public departure: string;

For Second Dropdown :-

<h4>Destination (must be different than departure location)</h4>
    <select name="" id="">
      <ng-container *ngFor="let city of opts">
      <option [value]="city.key" *ngIf="city.key !== departure" >
        {{ city.key }}
      </option>
      </ng-container>
    </select>

answered Jun 15, 2020 at 15:59

Aakash Garg

11k2 gold badges11 silver badges29 bronze badges

Collectives™ on Stack Overflow

Change dropdown options based on another dropdown angular

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest