下拉菜单在 Safari 中无法按预期工作？答案

【问题标题】：Dropdown not working as expected in Safari?下拉菜单在 Safari 中无法按预期工作？
【发布时间】：2017-11-11 00:22:24
【问题描述】：

我在 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 中，它显示第一个项目已被选中，但实际上它并未被选中。如何解决这个问题？

【问题讨论】：

我在 Angular 4 中也有这个问题，同样，仅在 Safari 中。你有没有找到解决办法？
我保留了一个默认选项（如占位符，value=undefined）
@simon 你找到不使用默认选项的解决方案了吗？
@crooksey -- 没有朋友，还没有；还没有机会好好看看。但是，如果没有更好的办法，您下面的解决方案看起来是一个可靠的选择。赞成。
@simon 谢谢，这是 safari 的继承问题，与角度无关。

标签： html angular safari

【解决方案1】：

实际上，您可能会发现接受的答案是不充分的。至少使用 Angular 5 和 Safari，我发现您必须明确地使选项未定义。换句话说：

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

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

【讨论】：

在我的例子中，我不得不使用<option disabled selected value=null></option>，因为我的选择连接到一个使用null 值初始化的模型。

【解决方案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>

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

【讨论】：