Steps to dynamically populate dropdown menus based on the selected options from other dropdown menus

Question

Steps to dynamically populate dropdown menus based on the selected options from other dropdown menus

I am working on a project that involves two dropdown menus. The options for the first dropdown menu are stored in a file called constant.ts. Depending on the selection made in the first dropdown, the options for the second dropdown will change accordingly.

.constant.ts

export const ActionRecordConstant = {
  contact: 'Contact1',

  about: 'About',
};

.component.ts

public getCodes() {
  let baseUrl = `/api end point`;
  this._restfulService
    .restfulGetData(baseUrl)

    .subscribe(
      (actionLookupData: ActionLookupData) => {
        if (actionLookupData) {
          this.contactCodes = actionLookupData.contactCodes;
          this.aboutCodes = actionLookupData.aboutCodes;
        }
      },
      (err) => {
        console.error(err);
      },
    );
}

public contactSelect(data: any) {
  this.contactId = data;
}
public aboutSelect(data: any) {
  this.aboutId = data;
}

.component.html

<div class="row mt-15">
  <div class="form-group">
    <div class="col-sm-3">
      <label> <b>Contact</b></label>
    </div>
    <div class="col-sm-7">
      <select class="form-control">
        <option value="" disabled [selected]="true"></option>
        <option>About</option>
        <option>Contact</option>
      </select>
    </div>
  </div>
</div>
<div class="row mt-15">
  <div class="form-group">
    <div class="col-sm-3">
      <label> <b>Action</b></label>
    </div>
    <div class="col-sm-7">
      <select>
        <option value="" disabled [selected]="true"></option>
        <option>//code</option>
      </select>
    </div>
  </div>
</div>

I need to implement functionality where selecting an option from the first dropdown will dynamically populate the options in the second dropdown based on the selection made.

javascript angular typescript dropdown

Answer 1

Answer №1

If you want to take action with a subject and assign specific values for dropdowns, you can use switch case statements.

<select
  *ngIf="billingActions$ | async as actions"
  #action
  (change)="onSelectAction(action.value)"
>
  <option value="0" selected>Choose an action</option>
  <option *ngFor="let action of actions" [value]="action.name">
    {{ action.name }}
  </option>
</select>
<select *ngIf="actionCodes$ | async as codes">
  <option *ngFor="let code of codes">{{ code.name }}</option>
</select>

When an action is selected, the respective codes will be assigned.

 private selectedAction = new Subject();
  private selectedAction$ = this.selectedAction.asObservable();

  // Define different types of actions
  billingActions = [
    {
      name: 'billing',
    },
    {
      name: 'member',
    },
    {
      name: 'other',
    },
  ];

  // Define corresponding codes for each type of action
  memberContactCodes = [
    {
      name: 'member Action Code A',
    },
    {
      name: 'member Action Code B',
    },
  ];

  billingActionCodes = [
    {
      name: 'billing Action A',
    },
    {
      name: 'billing Action B',
    },
  ];

  otherActionCode = [
    {
      name: 'Other Action A',
    },
    {
      name: 'OtherAction B',
    },
  ];

  categories = [
    { id: 1, name: 'billing' },
    { id: 2, name: 'others' },
  ];

  billingActions$ = of(this.billingActions);

  // Map the selected action to its respective codes
  actionCodes$ = this.selectedAction$.pipe(
    map((action: string) => {
      switch (action) {
        case 'billing':
          console.log('billin');
          return this.billingActionCodes;
        case 'member':
          return this.memberContactCodes;
        case 'other':
          return this.otherActionCode;
        default:
          return this.billingActionCodes;
      }
    })
  );

  onSelectAction(value) {
    this.selectedAction.next(value);
  }

You can test this functionality using the following example: https://stackblitz.com/edit/angular-ivy-5ea4fw

Answer 2

If you want to take action with a subject and assign specific values for dropdowns, you can use switch case statements.

<select
  *ngIf="billingActions$ | async as actions"
  #action
  (change)="onSelectAction(action.value)"
>
  <option value="0" selected>Choose an action</option>
  <option *ngFor="let action of actions" [value]="action.name">
    {{ action.name }}
  </option>
</select>
<select *ngIf="actionCodes$ | async as codes">
  <option *ngFor="let code of codes">{{ code.name }}</option>
</select>

When an action is selected, the respective codes will be assigned.

 private selectedAction = new Subject();
  private selectedAction$ = this.selectedAction.asObservable();

  // Define different types of actions
  billingActions = [
    {
      name: 'billing',
    },
    {
      name: 'member',
    },
    {
      name: 'other',
    },
  ];

  // Define corresponding codes for each type of action
  memberContactCodes = [
    {
      name: 'member Action Code A',
    },
    {
      name: 'member Action Code B',
    },
  ];

  billingActionCodes = [
    {
      name: 'billing Action A',
    },
    {
      name: 'billing Action B',
    },
  ];

  otherActionCode = [
    {
      name: 'Other Action A',
    },
    {
      name: 'OtherAction B',
    },
  ];

  categories = [
    { id: 1, name: 'billing' },
    { id: 2, name: 'others' },
  ];

  billingActions$ = of(this.billingActions);

  // Map the selected action to its respective codes
  actionCodes$ = this.selectedAction$.pipe(
    map((action: string) => {
      switch (action) {
        case 'billing':
          console.log('billin');
          return this.billingActionCodes;
        case 'member':
          return this.memberContactCodes;
        case 'other':
          return this.otherActionCode;
        default:
          return this.billingActionCodes;
      }
    })
  );

  onSelectAction(value) {
    this.selectedAction.next(value);
  }

You can test this functionality using the following example: https://stackblitz.com/edit/angular-ivy-5ea4fw

Steps to dynamically populate dropdown menus based on the selected options from other dropdown menus

Answer №1

Similar questions

Select a color at random from the array, animate it, then repeat the process by selecting a new random color from the

How can I track the number of correct answers in a ReactJS quiz with an auto-submit feature and a timer that stops?

Utilize Google Chrome Developer Tools to interact with the "Follow" buttons on the webpage by clicking on them

It appears that Serverworker is causing significant delays in processing ajax requests

Deactivate numerous buttons with the help of jQuery

Storing blank information into a Mongodb database with Node.js and HTML

What could be causing my mongoose array to remain empty without any values being stored in it?

Sending Node.js array from endpoint to Javascript function

`problem encountered when attempting to sanitize HTML through the npm package known as "sanitize-html"`

What is the reason that Ionic Lifecycle hooks (such as ionViewWillEnter and ionViewWillLeave) do not trigger when utilized as an HTML Selector?

Guide on how to showcase JSON data using vanilla JavaScript within the Laravel framework

What is the process for generating an alert box with protractor?

Successfully received response from Ajax post - unable to display on screen

Could Ramda assist in enhancing pipeline/composition processes with a logging feature?

The issue of HTTP parameters not being appended to the GET request was discovered

Tips for automatically scrolling the Google Maps view in a React application

A guide on determining the number of rows in an ag-grid with TypeScript and Protractor

Convenient Method for Making POST Requests with the Node Request Module and Callback

When a text is wrapped by an HTML div using absolute positioning, is there a way to prevent it from wrapping without relying on white space

Tap the <li> element in a select2 dropdown from Bootstrap using internjs