Hiding disabled select options in internet explorer > 11 using angularjs

Question

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!

SInce you are using angular you could also use ng-if or ng-show directives on the options in the html — Jasper Seinhorst
– Jasper Seinhorst, Commented Nov 7, 2017 at 14:03
Possible duplicate of Options with display:none not hidden in IE — Sanchit Patiyal
– Sanchit Patiyal, Commented Nov 7, 2017 at 14:04
@JasperSeinhorst You are absolutely right, what should be the condition of ng-if? — Rathma
– Rathma, Commented Nov 7, 2017 at 14:07

krutkowski86 · Accepted Answer · 2017-11-07 14:30:28Z

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>

thanks for your answer, I 'll check it tomorrow to see if it really works in my project or not, anyway very neat usage of ng-if

Collectives™ on Stack Overflow

Hiding disabled select options in internet explorer > 11 using angularjs

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related