homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

How to disable select options
go easy on me!

 11:50 am on Jul 22, 2008 (gmt 0)

How to specify certain options in a select menu, without effecting all of them....

I have the following select menu:

<select name="things" id="things">
<option value="fruit"> - Fruits - </option>
<option value="re">apple</option>
<option value="pe">pear</option>
<option value="color"> - Colours- </option>
<option value="bl">blue</option>
<option value="re">red</option>

As "fruit" and "color" are category groups, and not actual selectable options, I want to either disable (preferred) and/or change the background color of the category groups (not the categories).

Normally I would add "disabled='disabled'" to the menu, but in this situation I am unable to do that.

I'm wondering if it's possible to write some javascript at the bottom of the page that will do the disabling for me. Something like:

var cats = document.getElementById("things")

This doesn't work.

Am I not doing this right, or is this not even possible?




 12:37 pm on Jul 22, 2008 (gmt 0)

hi, wouldnt you be better simply changing the options that you dont want to be selectable to labels! or you could add a class element to each one that you want a specific style to and then add the appropriate styling to it!


 1:05 pm on Jul 22, 2008 (gmt 0)

What you want is an <optgroup>.

For example:

<select name="things" id="things">
<optgroup label="- Fruits -">
<option value="re">apple</option>
<option value="pe">pear</option>
<optgroup label="- Colours -">
<option value="bl">blue</option>
<option value="re">red</option>


 1:25 pm on Jul 22, 2008 (gmt 0)

Both of them sound like good ideas.

The thing is I'm using zend_framework for this site and you have to use their zend_form module. I can pass it a single array and set some basic "select level" options, like class, but I can't pass it "option level" items. Hence wanting to do this outside of the select itself. I know this is a dirty hack and there must be a better way of doing this in ZF, but I'll be dammed if I can find out how.

Shall I take it that this isn't possible do do with javascript?


 1:39 pm on Jul 22, 2008 (gmt 0)

Also note that you have two options valued "re" - that could cause some problems. How about changing apple to "ap"?


 1:43 pm on Jul 22, 2008 (gmt 0)

you can use javascript, if you have to?

var elem = document.getElementById("your_id");
gets the element with the unique id u have set in the input.
then trying setting the relevent attribute


 2:30 pm on Jul 22, 2008 (gmt 0)

i have just disabled by an input element by simply adding disabled="true" in the tag declaration statement, this could possibly save a bit of hassle!


 2:33 pm on Jul 22, 2008 (gmt 0)

I'm not familiar with zend_framework, but I think you can pass a nested array and it will treat it as option groups.

[Fruits] => Array
[re] => Apple
[pe] => Pear
[Colours] => Array
[bl] => blue
[re] => red


 4:45 pm on Jul 22, 2008 (gmt 0)

I am not familiar with the zend framework either, but I would be very surprised if it did not have a defined method for handling option groups.

Your other option would be to simply use two separate select dropdowns.

disabled="disabled" will not work, as that is not a valid attribute for options.
JavaScript is too unreliable, as it can be disabled by the client.


 6:13 am on Jul 23, 2008 (gmt 0)

disabled="disabled" will not work, as that is not a valid attribute for options.

w3c thinks it is ok and it works - i tried it myself:


 11:57 am on Jul 23, 2008 (gmt 0)

Thanks for all the replies.

Just found out that if I pass Zend_Form an array like so it displays it as a OPTGROUP format like you suggested. Nice!

Array (
[fruit] => Array ( [ap] => apple [pe] => pear )
[colour] => Array ( [bl] => blue [re] => red )


 1:31 pm on Jul 23, 2008 (gmt 0)

phranque, are you applying disabled to the "select" element? Yes, that is valid. Applying disabled to an <option> element, however, is not valid.

cantona, glad you got it sorted. :-)


 2:53 pm on Jul 23, 2008 (gmt 0)

From phranque's link above:
The following elements support the disabled attribute: BUTTON, INPUT, OPTGROUP, OPTION, SELECT, and TEXTAREA.


 4:34 pm on Jul 23, 2008 (gmt 0)

I stand corrected. I did not think this functionality existed. :-)


 6:09 pm on Jul 23, 2008 (gmt 0)

And I find myself corrected as well :)

Now, I can but wonder what a disabled optgroup looks like!


 8:12 am on Jul 24, 2008 (gmt 0)

Now I can use optgroup I don't have to worry about the disabled part.
I was asking about that because I didn't want the group heading (fruit, color) to be selectable. an optgroup label is not selectable and works like a charm! :)

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved