How to disable select options

go easy on me!

[cantona]

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>
</select>

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")
cats.options['fruit'].disabled=true;
cats.options['colour'].disabled=true;

This doesn't work.

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

Thanks

[Den10]

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!

[Fotiman]

What you want is an <optgroup>.
[w3.org...]

For example:

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

[cantona]

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?

[webfoo]

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

[Den10]

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
elem.setAttribute("disabled","true");

[Den10]

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!

[Fotiman]

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

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

[DrDoc]

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

option

s.
JavaScript is too unreliable, as it can be disabled by the client.

[phranque]

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:
[w3.org...]

[cantona]

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 ) 
)

[Fotiman]

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. :-)

[XtendScott]

From phranque's link above:

The following elements support the disabled attribute: BUTTON, INPUT, OPTGROUP, OPTION, SELECT, and TEXTAREA.

[Fotiman]

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

[DrDoc]

And I find myself corrected as well :)

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

[cantona]

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! :)