homepage Welcome to WebmasterWorld Guest from 54.161.166.171
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!
cantona




msg:3704389
 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>
</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




msg:3704423
 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!

Fotiman




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

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




msg:3704451
 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?

webfoo




msg:3704461
 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"?

Den10




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

Den10




msg:3704493
 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!

Fotiman




msg:3704497
 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.

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

DrDoc




msg:3704610
 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.

phranque




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

cantona




msg:3705260
 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 )
)

Fotiman




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

XtendScott




msg:3705390
 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.

Fotiman




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

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

DrDoc




msg:3705591
 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!

cantona




msg:3706062
 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