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

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

mike99cAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
erikTsomikConnect With a Mentor System Architect, CF programmer Commented:
0
 
Göran AnderssonConnect With a Mentor Commented:
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
 
Göran AnderssonCommented:
Checking back to see if you had any progress?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.