Как остановить IE от "выбора" первого требуемого параметра

#javascript #html #angularjs #internet-explorer

#javascript #HTML #angularjs #internet-explorer

Вопрос:

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>

Ответ №1:

Отключите первую опцию выбора:

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

Технически это дало бы пользователю три варианта вместо двух, хотя они не смогут выбрать отключенный.

1. Да, на самом деле это не то решение, которое я искал. Спасибо за ввод, хотя.

2. В этом суть моего обязательного поля. Вы не можете ничего выбрать или увидеть, что ничего не доступно, но изначально хотите, чтобы это было пусто, как в 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'}
  ];

});