如何阻止 IE “选择”第一个必需选项答案

【问题标题】：How to stop IE from 'selecting' first required option如何阻止 IE “选择”第一个必需选项
【发布时间】：2019-08-08 16:42:32
【问题描述】：

Internet Explorer 决定使用第一个可用选项作为“占位符”，而不是像 Chrome 那样将选择留空。

没有我的手动隐藏选项 <option value="" ng-if="false">Don't display a blank option</option>，我不想在必填的选择字段上看到一个空白选项。我想给用户 2 个选项，而不是让他们看到一个空选项。

如何强制 IE 不选择第一个必需选项。我不想让 javascript 在任何地方都涉及到 selectIndex -1，因为我周围有很多这样的选择字段。

var app = angular.module('myApp', []);

app.controller("myCtrl",function($scope){

  $scope.options = [
    {id:1, label: 'Option1'},
    {id:2, label: 'Option2'}
  ];

});

<html>
<head>
</head>
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
  
  <div ng-app="myApp" ng-controller="myCtrl">
    <select ng-model="option" required id="opt" name="opt" ng-options="option as option.label for option in options track by option.id">
      <option value="" ng-if="false">Don't display a blank option</option>
    </select>
  </div>
</body>
</html>

【问题讨论】：

标签： javascript html angularjs internet-explorer

【解决方案1】：

禁用第一个选择选项：

<option value="" selected disabled>(placeholder text, if you want)</option>

从技术上讲，这将为用户提供三个选项，而不是两个，尽管他们将无法选择禁用的选项。

【讨论】：

是的，这并不是我一直在寻找的解决方案。感谢您的意见。
这就是我的必填字段的重点。您无法选择任何内容或看到没有任何内容可用，但最初希望它是空白的，就像在 Chrome 中一样。

【解决方案2】：

一个非常干净的方法是在控制器中初始化 option 模型。像下面这样的东西应该可以工作：

var app = angular.module('myApp', []);

app.controller("myCtrl",function($scope){

  $scope.option = '';
  $scope.options = [
    {id:1, label: 'Option1'},
    {id:2, label: 'Option2'}
  ];

});

【讨论】：