2

Example of this issue on JSFiddle

Ran in Chrome, latest, Ubuntu.

When using jQuery to hide option elements inside a select element it uses display: none; and display: inline to alter visibility. I have encountered a situation where when a majority of option elements have been hidden, those that should be visible do not appear either. Removing one option from the list at this point will show just one other option but with arrow buttons, as if the issue is with the height of the select drop down.

I have been unable to find whether there is a limit placed on the number of hidden options inside a select or similar restrictions; has anyone encountered this before?

Examples

M1ke
  • 6,166
  • 4
  • 32
  • 50
  • I can't really see a problem in that fiddle. It also seems that all the options are `display: none` – Explosion Pills Sep 30 '13 at 18:31
  • http://stackoverflow.com/questions/9234830/how-to-hide-a-option-in-a-select-menu-with-css – Vic Sep 30 '13 at 18:34
  • I see the problem (@ExplosionPills - the incl ones are at bottom), and it appears related to the `price-3` class (delete those and it seems to work: [Revised jsFiddle](http://jsfiddle.net/XUSn9/5/). Haven't figured out why just yet. – cssyphus Sep 30 '13 at 18:37
  • The fiddle took code directly from the app, just to try and stay true to life. I maybe could have explained it better. Interesting with the removal of classes; definitely seems like a limit on how many items can be affected. – M1ke Oct 01 '13 at 08:20

1 Answers1

0

Leverage jQuery to add or remove the <option /> element. The class and style attributes are not supported across all browsers, See W3C. Not sure how you're handing down or evaluating the data but this is a down and dirty way:

$('select[name="price"] option[value="whatever"]').remove();
$('select[name="price"]').append(($('<option>', { value : key }).text(value));
gnome
  • 1,113
  • 2
  • 11
  • 19