Jump to content

Hiding Option Elements


djp1988
 Share

Recommended Posts

Hello, I am going through my project now jsut making it work on all browsers, and I ran into a curious problem, it would seem that if you set an option tag, inside a select tag to display:none; it still displays in safari !I am shocked by this !But if i Inspect element, then the style really is display:none but it's showing !Maybe the style attribute isn't standard for an <option>But i think it is....Anyone run into this before? It would be interesting to see if it's the same problem on safari for PC and Chrome

  <select name="select" id="select">  <option>one</option>  <option style="display:none">two - i should be hidden !</option>  </select>

EDIT: I just checked and safari for Pc and Chrome both have this problemEDIT 2: Opera shows a list element with no content, and when switching an existing element to display:none with DOM scripting, the element is still shown and it's content is also visible

Edited by djp
Link to comment
Share on other sites

This is very disappointing, what I'm doing is I have a list of countries, in alphabetical order, and when i select one, and press an 'add' button, the DOM kicks in and gets the countries name and adds it to another list along with a 'remove' button, a simple <ul> list and hides the selected option from the select list, and then selects the first option, which is a 'choose country' option with value=0Then if i look at the drop down menu again, the country I have chosen is no longer there, well it is, but it's just hidden, then if i click the remove button for that country in my other list, i simply do a removeChild for that element, and look up which element it is in the select list and set the display back to block.Obviously being alphabetical, I can't remove it and add it back in the correct position again, I could probably loop through and find the correct position of it, by comparing each letter in ascii code, but that's starting to get a little heavy for this simple application.Any suggestions ?

Link to comment
Share on other sites

This is very disappointing, what I'm doing is I have a list of countries, in alphabetical order, and when i select one, and press an 'add' button, the DOM kicks in and gets the countries name and adds it to another list along with a 'remove' button, a simple <ul> list and hides the selected option from the select list, and then selects the first option, which is a 'choose country' option with value=0Then if i look at the drop down menu again, the country I have chosen is no longer there, well it is, but it's just hidden, then if i click the remove button for that country in my other list, i simply do a removeChild for that element, and look up which element it is in the select list and set the display back to block.Obviously being alphabetical, I can't remove it and add it back in the correct position again, I could probably loop through and find the correct position of it, by comparing each letter in ascii code, but that's starting to get a little heavy for this simple application.Any suggestions ?
You could have an array already made in Javascript and just go updating the options with whichever elements you need.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...