2

I am trying to get rid of an empty option at the top of my select. This solution works in Chrome but not in IE as IE doesn't support display:none on options.

<option value="" style="display:none"></option>

What would be the best way to hide it? I'm using AngularJS framework and tried plenty of solutions like ng-if but none of them work...

georgeawg
  • 48,608
  • 13
  • 72
  • 95
LazioTibijczyk
  • 1,701
  • 21
  • 48
  • https://stackoverflow.com/questions/20373558/options-with-displaynone-not-hidden-in-ie – vadzim dvorak Aug 06 '18 at 10:09
  • Your solution will not work in IE. If you are using AngularJS anyway, what about just editing the DOM and removing the – Dominik Aug 06 '18 at 10:11
  • I have seen that topic and I can't see how any of the answers is actually a reasonable choice. PS: I am not using jQuery. – LazioTibijczyk Aug 06 '18 at 10:13
  • If you have a reference to the select element, then `select.removeChild(select.options[0])` will do the job. – RobG Aug 06 '18 at 10:13
  • If you're using angularJS then you can set model to filtered copy of your array (I assume you are using ng-repeat) – barbsan Aug 06 '18 at 10:14
  • @barbsan, I am using ng-options and my array isn't populated with an empty option. It is done by something in the background. Probably select's functionality. – LazioTibijczyk Aug 06 '18 at 10:17
  • Could you show more code? Propably you can use filter to filter out specific values (like `ng-options="option in options | filter: functionToRemoveSomeOptions "`). Note: functionToRemoveSomeOptions returns boolean – barbsan Aug 06 '18 at 10:24
  • 2
    Instead of fix in the wrong way, you shouldn't populate the empty options in the select element... – Girish Aug 06 '18 at 10:30
  • I am not populating the empty options... I assume it's angular that's doing that somehow. I've read it adds empty option when ng-model is empty. – LazioTibijczyk Aug 06 '18 at 11:59

1 Answers1

0

Okay, I've eventually came up with this solution. Isn't the prettiest but is a spot on fix for me

<option ng-if="false" value=""></option>
LazioTibijczyk
  • 1,701
  • 21
  • 48