Disable Select List Item

I have a select list like this

Cameras
->Olympus
->Nikon
->Canon
Cars
->Toyota
->BMW
->Ford

These above items are in one select list. I want to disable 'Cameras' and 'Cars'. I want that a customer should not be able to click top categories i.e cars and cameras. Only sub category should be selectable i.e Nikon, Toyota...

How can I do this.

 

<option disabled="disabled">Cameras</option>

Code (markup):

 

I have already tried it. It's not working.

 

Are you sure? I just tried it:

<select>
<option disabled="disabled">a</option>
<option>- a1</option>
<option>- a2</option>
<option disabled="disabled">b</option>
<option>- b1</option>
<option>- b2</option>
</select>

Code (markup):

BTW, IE doesn't support this. You need JS to mimic this behaviour.

EDIT: as greatlogix found out, <optgroup> does the job, and probably better than using disabled attribute.

 

Can you please refer a tutorial or link for this type of js. Thanks

 

http://apptaro.seesaa.net/article/21140090.html
http://www.google.com/search?q=select+disable+options

 

Thanks krt,

I tried to give a green to you I got message that I have to spread it to other members before giving it to you. So next time I will add a green to you.

I have found an easy solution

<select name="catsndogs">
<optgroup label="Cats">
<option>Tiger</option>
<option>Leopard</option>
<option>Lynx</option>
</optgroup>
<optgroup label="Dogs">
<option>Grey Wolf</option>
<option>Red Fox</option>
<option>Fennec</option>
</optgroup>
</select>

I hope this will help other DP members.

 

No worries

And good find, something I and many others seem to forget apparently - hence the top search result suggesting a JS approach with no comment about <optgroup>!

 

Whilst the above is valid would it not be better to have 2 drop down lists? The first being catagory (Cameras, Cars, Cats etc) and the second being dynamically populated subject to the choice from list 1? Obviously depends on how long your lists are but with categories having potentially multiple names (cars, vehicles, automobiles etc) it can be frustriating for a user to find a category and then an item in a single large list.

 

Depends on how big the list is. I'd prefer something similar to what you said though. A dropdown to select category and another one that is dynamically populated with subcategories or items from the selected category.