I was wondering how I can hide the disabled options
in AngularJS for IE?
To be more clear take a look at this fiddle:
https://jsfiddle.net/s723gqo1/1/
I use this css
for hiding the disabled options in chrome/firefox, but they don't work in IE:
select option[disabled]:first-child {
display: none;
}
I have seen other questions here that suggest using JavaScript for removing the disabled option, but I couldn't get it plugged into my use case.
Any help is appreciated!
Edit: I have these meta tags in my head:
<!DOCTYPE html>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Edit 2 this answer https://stackoverflow.com/a/20373614/4451931 is too general, and I cannot solve my problem with this answer, for I know it should be done with javascript, but my question is How?
Where should I put the logic for remove and add of disabled options in provided jsfiddle?
Edit 3 I implemented the provided answer in my project, but unfortunately, it didn't solve my problem.
the provided fiddle by this link https://jsfiddle.net/rsuuwkh9/ renders the default select option like this:
but in my project it is rendered like this:
The problem is that when the condition of showing the default option is true and it becomes false and then true again, in my project the default option disappears but in provided answer fiddle it is restored to where it should be, I would be happy if anyone helps me with this case!
Here's a working jsfiddle https://jsfiddle.net/rsuuwkh9/
<select ng-model="selectedName" ng-change="resetSkills()" ng-options="name as name.name for name in names">
<option value="" ng-if="!selectedName">--Select a name --</option>
</select>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With