I am having trouble hiding the disabled options in AngularJS specifically for IE. Check out this fiddle for a better idea: https://jsfiddle.net/s723gqo1/1/
While I have CSS code that works for hiding disabled options in Chrome/Firefox, it doesn't seem to work in IE:
select option[disabled]:first-child {
display: none;
}
I've come across suggestions to use JavaScript for removing disabled options, but I'm struggling to implement it in my scenario.
Any guidance would be greatly appreciated!
Edit: These are the meta tags in my HTML 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: I found this answer to be too general and not applicable to my issue. I understand it should involve JavaScript, but I'm unsure how to proceed. Any insights on where to incorporate the logic for removing and adding disabled options in the provided jsfiddle?
Edit 3: Although I tried implementing the suggested solution in my project, it didn't resolve my problem. The fiddle at this link https://jsfiddle.net/rsuuwkh9/ shows the default select option correctly, but in my project it appears differently. When the condition for displaying the default option toggles between true and false, the behavior differs in my project compared to the provided fiddle. I would appreciate any assistance with this specific scenario!