HTML |选择标签 | AngularJS | Safari 和资源管理器中显示空白选项答案

我使用下一个 html + Angulrjs 代码是为了创建一个下拉列表。

 <li class="category-li" ng-if="!eventDetailsCtrl.showRule && !(eventDetailsCtrl.pageType == 'incident' || eventDetailsCtrl.pageType == 'anomaly')"><span class="fontBold">Close Reason: &nbsp;</span>
                    <select class="event-details-category-select" ng-model="eventDetailsCtrl.eventData.closingReason" name="" id="category" ng-options="category for category in eventDetailsCtrl.categories" ng-change="eventDetailsCtrl.categoryUpdate(eventDetailsCtrl.eventData.closingReason)">
                        <option value="" ng-show="false"></option>
                    </select>
</li>

一开始，下拉列表除了显示类别中的选项外，还显示空白选项（一个空选项），所以我添加了这一行

<option value="" ng-show="false"></option>

它在 Chrome、Firefox 和 Edge 上运行良好，但我仍然在 Explorer11 和 safari 中看到空白行

有人可以给我建议吗？

【问题讨论】：

您的意思是当您使用 IE 11 浏览器运行代码时，它看起来像这样 test result？如果是，您可以添加类似<option value="">--Select--</option> 的选项可以帮助解决此问题。 See here。如果问题不同，那么我建议您分享问题的快照可能有助于更好地理解问题。
是的，问题就像您在test result 链接中提出的那样。起初我在所有浏览器上都遇到了这个问题，然后我添加了这行 <option value="" ng-show="false"></option>，它适用于 Chrome、Edge 和 firefox 浏览器，但不适用于 safari 和 explorer。
解决方法是否适合您？如果是，请告诉我。我会把它作为答案发布。
我应该使用它而不是我尝试使用的代码还是另外使用它？
您可以将<option value="" ng-show="false"></option> 替换为<option value="">--Select--</option>。

标签： javascript html angularjs internet-explorer safari

【解决方案1】：

我建议您将<option value="" ng-show="false"></option> 替换为<option value="" disabled selected>--Select--</option>。

它可以帮助您解决 IE 11 浏览器的问题。

<span class="fontBold">Close Reason: &nbsp;</span>
<select >
<option value="" disabled selected>--Select--</option>
<option value="1">Reason-1</option>
<option value="2">Reason-2</option>
<option value="3">Reason-3</option>
</select>

输出：

【讨论】：