How to connect multiple select tag in HTML?-CodePudding

I have a data grid containing the student's information (Name, Class, Score) with a checkbox for each row. The requirement is when the user selects a Node or multiple Nodes and clicks on the show information Button it opens a new window that contains 3 drop-down lists: The first one, shows all the Student's Name, the Second one shows all the student's Class and the third one shows all the student's Score. Everything is ok I want just to connect the 3 drop-down lists. I want when I click on the Name of the first student, the second and the third drop-down list to show the information of the first student without selecting them manually. This is my HTML code

<ng-template #studentInformationTemplate>
...
<div class= "row" style="margin-right: 40px">
   <div  id="StudentNameDiv">
         <label class= control-label" for=studentName"> Student Name </label>
         <select StudentName" name="StudentName">
             <option *ngFor="let name of NameStudentTable" [value]="name">{{ name }} </option>
         </select>
   </div>


   <div  id="StudentClassDiv">
         <label class= control-label" for=studentClass"> Student Class</label>
         <select StudentClass" name="StudentClass">
             <option *ngFor="let class of NameClassTable" [value]="class"> {{ class}} </option>
         </select>
   </div>
</div>
<div class= "row" style="margin-right: 40px">
   <div  id="StudentNameDiv">
         <label class= control-label" for=studentScore"> Student Score</label>
         <select StudentClass" name="StudentScore">
             <option *ngFor="let score of NameScoreTable" [value]="score "> {{ score }} </option>
         </select>
    </div>
</div>
...
</ng-template>

CodePudding user response：

To do that, you will need to use change event of the select. Everytime you select a new name, it will call onNameChanged function. Within this function, you can get the newly selected value, and do some logic to update the select on the student class.

You will also need to use ngModel that allow you to update the value of the select for the student class. We will bind the selectedClass to this ngModel so you can update it in the onNameChanged function.

example.component.html

...

<select id="StudentName" (change)="onNameChanged($event)">
 <option *ngFor="let name of names" [value]="name">{{name}}</option>
</select>

<select id="StudentClass" [(ngModel)]="selectedClass">
  <option *ngFor="let class of classes [value]="class">{{class}}</option>
</select>

...

example.component.ts

@Component({
 ...
})
export class ExampleComponent {

  public selectedClass = '';

  ...

  public onNameChanged(event: Event) {

    const selectElement = event.target as HTMLSelectElement;
    
    // this will have the newly selected student name.
    const selectedName = selectElement.value;

    // Now you do your logic to get the class belongs to this student.
    const studentClass = '';    

    // Then update the selectedClass with it.
    this.selectedClass = studentClass;
  }

  ...
}

If you have trouble with ngModel, you will need to import FormsModule in AppModule to use it.

app.module.ts

...
import { FormsModule } from '@angular/forms';


@NgModule({
  imports: [ 
    ...
    FormsModule, 
    ...
  ],
  
})
export class AppModule { }