下拉菜单在 Safari 中没有按预期工作？

Question

我在 Angular 2 项目中有一个下拉列表：

<div class="form-group">
   <label for="vendors">Vendors</label>
   <select class="form-control" id="vendor_id" name="vendor_id" [(ngModel)]="selectedVendor"  (ngModelChange)="onVendorChange($event)" required>
      <option *ngFor=" let vendor of vendors " [ngValue]="vendor"> {{vendor.business_name}} </option>
   </select>
</div>

这在 Chrome 中工作正常，但是当我在 Safari 中打开它时，当页面加载时，即使我没有选择任何内容，它也会显示第一个项目被选中。但是，如果我单击“提交”，它将显示“此字段为必填字段”。

在 Safari 中，它显示第一个项目被选中，但实际上它没有被选中。如何解决这个问题？

Answer 1

事实上，您可能会发现接受的答案是不够的。至少在使用 Angular 5 和 Safari 时，我发现您必须显式地将该选项设为未定义。换句话说：

 <option disabled selected value=undefined> --Select-- </option>

否则，该选项将简单地被标记为禁用，并且 Safari 将继续显示它选择了第一个真实选项，而事实上它没有（也不可能）。

Answer 2

这不是角度问题，这是 safari/mobile safari 上的默认行为。下面显示了一个简单的解决方案/解决方法。

如果您添加另一个选项框，例如：

<option disabled selected value> --Select-- </option>

那么你的代码就变成了：

<div class="form-group">
    <label for="vendors">Vendors</label>
    <select class="form-control" id="vendor_id" name="vendor_id" [(ngModel)]="selectedVendor"  (ngModelChange)="onVendorChange($event)" required>
        <option disabled selected value> --Select-- </option>
        <option *ngFor=" let vendor of vendors " [ngValue]="vendor"> {{vendor.business_name}} </option>
    </select>
</div>

这样，在用户做出有效选择（答案取自此答案）后，您无法重新选择第一个“选择”框。