0

I am trying to hide an option within a select using ng-hide, but I would like to have it show in the select input box if it was pre-selected.

Each of the checkboxes hides an option in the select input unless the option has been selected before the user clicks the checkbox. The code works in Chrome, but not in IE. It seems that is because IE does not support display:none style.

Is there a way to hide an option in the dropdown but still show it in the select input box in IE 10+? I've included the code that shows the desired behavior in Chrome below.

<!DOCTYPE html>
<html ng-app>
<head>
<title>select test</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
</head>
<body>
<form id="f1" name="f1" method="get">
<input type="checkbox" name="chk1" value="chk1" ng-model="c1">
<input type="checkbox" name="chk2" value="chk3" ng-model="c2">
<input type="checkbox" name="chk2" value="chk3" ng-model="c3">
<select>
<option value="1" label="one" ng-hide="c1"></option>
<option value="2" label="two" ng-hide="c2"></option>
<option value="3" label="three" ng-hide="c3"></option>
</select>
</form>
</body>
</html>
David Kuo
  • 1
  • 3
  • Have a look at [this](https://stackoverflow.com/a/20373614/7285362) and [this](https://stackoverflow.com/a/28898023/7285362) answers. It looks, you have the same issue. – Comteng Dec 11 '17 at 16:58
  • The solutions offered there removes the items, which will prevent them from showing in the dropdown, but the removed item won't be displayed the selection box if it was pre-selected. Please refer to my code snippet in Chrome. When I check the first checkbox, 'one' is still displayed in the select box, but the option does not show in dropdown. – David Kuo Dec 27 '17 at 16:16

0 Answers0