Solved

style="display:none" does not work for option element

Posted on 2007-12-04
4
5,739 Views
Last Modified: 2009-04-11
Hello
I have a select list and I need a way to set certain option tags invisible. I tried applying style="display:none" to the option tags but this has had no effect.
The reason for this is that I am going to use some JavaScript to dynamically enable some selections in the drop down list.
Please see the attached code snippet.
Thanks

<select id="counties" tabindex="1">
 <option value="">Select</option>
 <option style="display:none" value="IE76176089">Carlow</option>
 <option style="display:none" value="IE96268862">Cavan</option>
 <option style="display:none" value="IE55624026">Clare</option>
 <option style="display:none" value="GB55624026">London</option>
 <option style="display:none" value="GB55624026">Surrey</option>
</select>

Open in new window

0
Comment
Question by:mike99c
  • 2
4 Comments
 
LVL 19

Assisted Solution

by:SteveH_UK
SteveH_UK earned 166 total points
ID: 20402555
0
 
LVL 19

Accepted Solution

by:
erikTsomik earned 167 total points
ID: 20402757
0
 
LVL 29

Assisted Solution

by:Göran Andersson
Göran Andersson earned 167 total points
ID: 20413381
You can't hide options, you have to remove them from the select list if you don't want them to show up.

Here is how you dynamically add an option to the select list:

var o = document.createElement('option');
o.value = 'IE76176089';
o.text = 'Carlow';
document.getElementById('counties').options.Add(o);
0
 
LVL 29

Expert Comment

by:Göran Andersson
ID: 20548658
Checking back to see if you had any progress?
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

773 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question