Attaching CRUD functions to drop down menu - html

Question

I created the following tables below to represent the hierarchy of a specific job. Then I created some CRUD functions in java to "createJob", "getJob", "updateJob" and "deleteJob" in these tables.
Now I would like to implement the data I get back from these operations on a user interface. I'm looking for the simplest UI where I could probably have the job listed in a dropdown list and then based on my selection I can choose the job type then based on that selection choose the job specification. These CRUD functions can be performed on each dropdown. To add a new Job, rename it, etc.
What's the simplest way to do this? I've been looking around for some APIs because I believe this would be something that's common. There is probably a more descriptive term for these types of drop downs which would help my search.
EDIT After further research, what I am looking for is an "Editable Cascading drop down list".
EDIT 2 I was able to see some good examples using Angular to create the cascading drop down list. I was able to create the app.component.ts and app.component.html below. I can get the dropdowns to display but they are not cascading based on the Job selected. What am I doing wrong in my code? Also, soon as this is working, how can I prepare the code to make use of the java functions I created earlier rather than the hard coded values I have?
+---------+---------+
| Id | Job |
+---------+---------+
| 1 |Developer |
|
| 2 |QA Tester |
+---------+---------+---------+-----+
| Id | Job_Type | Job_Id
+---------+---------+---------+-----+
| 1 |Java Developer | 1 |
| 2 |JS Developer | 1 |
| 3 |FrontEnd Tester | 2 |
| 4 |Backend Tester | 2 |
| 5 |Php Developer | 1 |
+---------+---------+---------+----+-----------+
| Id | Job_Specification | Job_Type_Id
+---------+---------+---------+----+-----------+
| 1 |Spring Developer | 1 |
| 2 |Angular Developer | 2 |
| 3 |UI Tester | 3 |
| 4 |Mobile Tester | 3 |
| 5 |Hibernate Developer | 1 |
APP.COMPONENT.TS
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Roles!';
selectedRole= 0;
selectedProviderType = 0;
providerType = [];
classification = [];
onSelectRole(role_id: number) {
this.selectedRole = role_id;
this.selectedProviderType = 0;
this.classification = [];
this.providerType = this.getProviderType().filter((item) => {
return item.role_id === Number(role_id)
});
}
onSelectProviderType(providerType_id: number) {
this.selectedProviderType = providerType_id;
this.classification = this.getClassification().filter((item) => {
return item.providerType_id === Number(providerType_id)
});
}
getRoles() {
return [
{ id: 1, name: 'Developer' },
{ id: 2, name: 'QA Tester' },
];
}
getProviderType() {
return [
{ id: 1, role_id: 1, name: 'Java Developer' },
{ id: 2, role_id: 1, name: 'JS Developer' },
{ id: 3, role_id: 2, name: 'FrontEnd Tester' },
{ id: 4, role_id: 2, name: 'Backend Tester' },
{ id: 5, role_id: 3, name: 'Php Developer' },
]
}
getClassification() {
return [
{ id: 1, providerType_id: 1, name: 'Spring Developer' },
{ id: 2, providerType_id: 1, name: 'Angular Developer ' },
{ id: 3, providerType_id: 1, name: 'UI Tester' },
{ id: 4, providerType_id: 1, name: 'Mobile Tester' },
{ id: 5, providerType_id: 2, name: 'Hibernate Developer' },
]
}
}
APP.COMPONENT.HTML
</div>
<div class="form-group">
<label class="control-label" for="Role">Role:</label>
<select *ngIf="getRoles()" [(ngModel)]="selectedRole" (change)="onSelectRole($event.target.value)" class="form-control input-lg" id="role">
<option value="0">Select Role</option>
<option *ngFor="let role of getRoles()" value= {{role.id}}>{{role.name}}</option>
</select>
</div>
<div class="form-group">
<label class="control-label" for="ProviderType">Provider Type:</label>
<select *ngIf="getProviderType()" [(ngModel)]="selectedProviderType" (change)="onSelectProviderType($event.target.value)" class="form-control input-lg" id="providerType">
<option value="0">Select Provider Type</option>
<option *ngFor="let providerType of providerTypes" value= {{providerType.id}}>{{providerType.name}}</option>
</select>
</div>
<div class="form-group">
<label class="control-label" for="Classification">Classification:</label>
<select class="form-control input-lg" id="classification">
<option *ngIf="!selectedProviderType" value="0">Select Classification</option>
<option *ngFor="let classification of classifications" value= {{classification.id}}>{{classification.name}}</option>
</select>
</div>
<div class="form-group">
<label class="control-label" for="Specification">Specification:</label>
<select class="form-control input-lg" id="city">
<option *ngIf="!selectedClassification" value="0">Select Specification</option>
<option *ngFor="let specification of specifications" value= {{specification.id}}>{{specification.name}}</option>
</select>
</div>