在角度为4的选择框中处理optgroup

发布时间：2020-12-17 07:00:09 所属栏目：安全来源：网络整理

导读：如何在角度4的选择框中获取onchange函数中的optgroup标签值我有一个表格中的选择框,其中有多个日期作为选项组,时间为24小时格式,分别为1000,1200和1400,分别为10 AM12PM和2PM. select class="form-control" formControlName="arrival_time" (change)="onSlo

如何在角度4的选择框中获取onchange函数中的optgroup标签值

我有一个表格中的选择框,其中有多个日期作为选项组,时间为24小时格式,分别为1000,1200和1400,分别为10 AM12PM和2PM.

<select class="form-control" formControlName="arrival_time" (change)="onSlotChange($event)">
                     <option value="" data-date="" data-slot="">Select Arrival Time</option>
                     <ng-container *ngIf="!availablePrevSlots">
                        <optgroup label="{{availablePrevSlotDate}}">
                           <option value=null hidden>-- No Slot Available --</option>
                        </optgroup>
                     </ng-container>
                     <ng-container *ngIf="availablePrevSlots">
                        <optgroup label="{{availablePrevSlotDate}}">
                           <option value=null hidden>HH:MM</option>
                           <option *ngFor="let slot of availablePrevSlots" [value]="slot">{{slotToString(slot)}}</option>
                        </optgroup>
                     </ng-container>
                     <ng-container *ngIf="!availableSlots">
                        <optgroup label="{{availableSlotDate}}">
                           <option value=null hidden>-- No Slot Available --</option>
                        </optgroup>
                     </ng-container>
                     <ng-container *ngIf="availableSlots">
                        <optgroup label="{{availableSlotDate}}">
                           <option value=null hidden>HH:MM</option>
                           <option *ngFor="let slot of availableSlots" [value]="slot">{{slotToString(slot)}}</option>
                        </optgroup>
                     </ng-container>
                     <ng-container *ngIf="!availableNextSlots">
                        <optgroup label="{{availableNextSlotDate}}">
                           <option value=null hidden>-- No Slot Available --</option>
                        </optgroup>
                     </ng-container>
                     <ng-container *ngIf="availableNextSlots">
                        <optgroup label="{{availableNextSlotDate}}">
                           <option value=null hidden>HH:MM</option>
                           <option *ngFor="let slot of availableNextSlots" [value]="slot">{{slotToString(slot)}}</option>
                        </optgroup>
                     </ng-container>
                  </select>

现在我使用onchange函数获取所选的时间/点值,但我也想获得选项标签
有没有方法可以获得optgroup标签？

一旦我们提交表单,我们在数据库中保存插槽,在编辑页面上我们用数据绑定显示它,但由于多个optgroup可以有相同的插槽,它总是显示第一个选择的optgroup值

不确定如何显示此处选择的确切optgroup值.

解决方法

您可以使用VanillaJS来实现这一点,在您的更改功能中写下：

const selectedIndex = ev.target.selectedIndex;
const optGroupLabel = ev.target.options[selectedIndex].parentNode.getAttribute('label');

这是一个有效的stackBlitz：https://stackblitz.com/edit/angular-64vvdn

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!