Javascript 如何使用在另一个下拉列表中选择的相同值自动填充一个下拉列表中的值？

我有两个下拉列表，两个下拉列表中的值相同

不同组件中的预订类别和服务类别下拉列表

---

当我从“预订类别”下拉列表中选择任何值时，该值应填写在“服务类别”下拉列表中，并允许通过单击下拉列表更改该值。 如果在“预订类别”下拉列表中未选择任何值，则“服务类别”下拉列表可以保持原样

---

从“预订舱位”下拉列表中选择“头等舱”后，当我转到“服务舱位”下拉列表时，它应自动填写为“头等舱”。单击下拉列表，如果需要更改，列表应可见

---

预约班

<div>
      <label class="col-sm-2">{{'Booking Class' | translate}}</label>
                      <div class="col-sm-3">
                            <ng-select placeholder="Any" [virtualScroll]="true" formControlName="serviceClass">
                              <ng-option *ngFor="let item of bookingClassData[value]="item.classOfServiceName">  {{item.classOfServiceName}}</ng-option>
                            </ng-select>
                      </div>
 </div>

{{'Booking Class'| translate}}
这是一个onchange事件监听器，用于演示此想法。因此，要看到它的实际效果，您需要更改选择。我通过字典和循环来实现这个目标


//塑料杯可以喝咖啡或茶
//玻璃杯可以有冰咖啡、冰茶或苏打水
//我们不需要在这里包含任何未选中的杯子
杯子={“塑料”：[“咖啡”、“茶”]，“玻璃”：[“冰咖啡”、“冰茶”、“苏打”]}
//获取杯子的选择框
cup=document.getElementById（“cup”）；
//添加事件侦听器
cup.addEventListener（“更改”，函数（）{
//获取饮料的选择框
饮料=document.getElementById（“饮料”）
//将其innerHTML设置为nothing
drink.innerHTML=“”；
//如果杯选择框中的值不是nocup（未选择杯）
如果（杯值！=“nocup”）
{
//在不同的饮料上循环
对于（变量i=0；i

选择一个
塑料
玻璃
没有选择杯子
这是正确的答案，尽管它使用的是纯JS而不是ng select（自定义角度库），而且它还改变了从选择现有选项到填充选项的事实，但概念是相同的。这就是说：不必通过jsScript@ClarkeGriffin显式地添加监听器，您可以使用添加一个函数到
Booking
，该函数在选择更改时读取，此时您可以使用jQuery从
服务
中选择正确的选项。这更有意义吗？是的，我正在尝试添加（更改）。我有单独的component.ts文件。如果我在预订ts文件中提供该功能，我们如何将其链接到服务？你能根据我的代码片段提供代码吗@fabc@ClarkeG隐马尔可夫模型。。。坦白地说，我通常会为Booking.ts和Service.ts包含一个桥接组件.ts文件，用于导入它们，并且只包含函数（因为这两个组件都是必需的，而且据我所知，当屏幕上只有一个组件时，不太可能被调用）。我想我误解了你问的问题，请你详细解释一下好吗？（试图开始聊天，但意识到我只能在自己的答案中这样做，对此表示抱歉。或者我忘记了如何正确地进行聊天）即使我无法创建聊天。我的疑问是我们在哪里定义功能（变更）@fabc@ShanerM13，你的回答是最好的，越是“有角度”的ic方法需要创建新文件，OP确认他们不能使用。。。我会同意你的答案，但你只能这样做一次
<div class="form-group col-md-3">
            <label>{{'Class Of Service' | translate}}</label>
               <ng-select placeholder="Select Class Of Service" [virtualScroll]="true"    formControlName="classOfService">
                  <ng-option *ngFor="let data of classOfServiceData" [value]="data.classOfServiceName">
                    {{data.classOfServiceName}}</ng-option>
                </ng-select>
    </div>