Safari <select> 上的默认空白选项答案

【问题标题】：Default blank option on <select> for SafariSafari <select> 上的默认空白选项
【发布时间】：2019-02-22 02:05:38
【问题描述】：

我正在尝试创建一个 <select>，其中第一个 <option> 为空，它在下拉列表中不可见且不可选择。

我已经研究了大约 4 个小时。我看到了很多工作选项，但问题是它们（或至少我发现的）都没有在 Safari 上工作。

这是我的代码：

<select class="custom-select" formControlName="subindustryName">
   <option *ngFor="let subindustry of subIndustries" [value]="subindustry.value"> 
      {{subindustry.label}}
   </option>
</select>

我没有使用 jQuery。

【问题讨论】：

能分享一下代码吗
也许这会有所帮助：stackoverflow.com/questions/8605516/…
default select option as blank的可能重复
我已经尝试了这些帖子中的几乎所有内容，但它对我不起作用

标签： javascript html angular

【解决方案1】：

这对你有用吗？您可以为选项设置样式属性并禁用该字段，使其不再可选。这个问题似乎已经在另一个帖子中得到了回答。 default empty option。

<select>
  <option disabled selected value style="display:none"></option>
  <option value="one">one</option>
  <option value="two">three</option>
  
</select>

【讨论】：

我已经试过了，这是我能做的最好的了。当它一开始显示下拉菜单时，选项仍然出现在那里，我不喜欢那个
实际上没有禁用。禁用它甚至不会使选择空白。
不确定，可能与 safari 有关。大多数用户可能不会注意到或关心。
其实是给客户的，他坚持
我想你可以使用 CSS 和悬停选择来制作下拉菜单，并使用一些 javascript 来设置隐藏字段。它比选项字段复杂得多，但它应该完成同样的事情。更糟糕的是，如果没有 javascript，这种类型的下拉菜单将无法工作。

【解决方案2】：

只需添加值未定义的选项即可强制角度选择该值。如下所示

<select class="custom-select" formControlName="subindustryName">
    <option value="undefined"></option>
    <option *ngFor="let subindustry of subIndustries" 
    [value]="subindustry.value">{{subindustry.label}}</option>
</select>

如果你想让它不可选，那么添加'disabled'属性。

根据评论编辑

所以你粘贴的任何问题都应该有效。这是我的代码 sn-p 正在工作..

<div class="form-group">
  <label class="col-md-3 control-label">Gender</label>
    <div class="col-md-3">
      <select id="gender" class="form-control" [(ngModel)]="userModel.gender" name="gender" required >
        <option value="male">Male</option>
        <option value="female">Female</option>
      </select>
    </div>
</div>

只需尝试对“子行业名称”使用模板驱动方法并检查。

【讨论】：

好的，所以工作正常，与
刚刚编辑了我的答案。尝试模板驱动的方法并检查它是否有效。如果它有效，那么您可以检查反应式方法的问题

【解决方案3】：

<option disabled selected value>Select Option</option>
<option value="one">one</option>
<option value="two">two</option>

在 Safari 和 Chrome 中，默认禁用选择值是这个。

【讨论】：

【解决方案4】：

如果你使用like。

<select>
    <option> Select Option </option>
    <!--  replace above code with --> 
    <option value='' selected> Select Option </option>
</select>

希望这会奏效。

【讨论】：