...

View Full Version : Disable Item in a Select (Combo) box



jason_kelly
05-30-2012, 09:43 PM
Hello,

I can't seem to find for the life of me, anywhere, as to how to disable and grey out an option in a select box.

Let's say I have the following list:

[DROP-DOWN MENU] id="fruits"
Apples
Oranges
Bananas
Mangos
Strawberries
Kiwis

I would like to disable and grey out "Mangos"

I have the following code, but it doesn't seem to work



document.getElementById('fruits').options['Mangos'].disabled = true


Any ideas?

Thanks for all of your help.

Cheers,

Jay

chump2877
05-30-2012, 10:02 PM
You could use the <optgroup> tag and style it to look disabled with CSS?...or you could generate a pseudo-select menu with JS/CSS made out of <div> tags and then customize the menu how ever you want it...

Either way, you'd need to use some JS DOM manipulation and CSS to "enable" the "disabled" optgroup element or div tag...

chump2877
05-30-2012, 10:04 PM
Also, you could see if there is a jQuery way to create a pseudo-select element that does what you want: https://www.google.com/search?client=opera&rls=en&q=jquery+select+menu&sourceid=opera&ie=utf-8&oe=utf-8&channel=suggest#sclient=psy-ab&hl=en&safe=off&client=opera&hs=UEr&rls=en&channel=suggest&q=jquery+select+menu&oq=jquery+select+menu&aq=f&aqi=&aql=&gs_l=serp.12...0.0.0.29945.0.0.0.0.0.0.0.0..0.0...0.0.gtkpVXgL29E&pbx=1&bav=on.2,or.r_gc.r_pw.,cf.osb&fp=a58c643bde694848&biw=1916&bih=915

chump2877
05-30-2012, 10:27 PM
Here you go:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<title>TITLE</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#fruits option[value=Mangos]").attr('disabled', true);
$("#fruits option[value=Mangos]").css("color", "#aaa");
});
</script>
</head>
<body>

<select id="fruits">
<option value="Apples">Apples</option>
<option value="Oranges">Oranges</option>
<option value="Bananas">Bananas</option>
<option value="Mangos">Mangos</option>
<option value="Strawberries">Strawberries</option>
<option value="Kiwis">Kiwis</option>
</select>

</body>
</html>

jQuery does this for you without using any special kind of UI control....

jason_kelly
05-30-2012, 11:43 PM
Awesome!

Thanks for everyones help.

Being new to javascript and all, I would like to thank Chump very much for the simple jquery code.

Works like a charm.

Again,

Thanks for everyones time and dedication on this question.

Cheers and have an awesome evening

Jay

Old Pedant
05-30-2012, 11:44 PM
Chump's answer doesn't work in MSIE 7 or 8 (might not work in 9, not sure). Options simply can't be disabled in those browsers.

There's a dirt simple way to do this:


<select onchange="if ( this.options[this.selectedIndex].style.backgroundColor != '') this.selectedIndex = 0;">
<option value=""> -- choose a fruit -- </option>
<option> Orange </option>
<option> Banana </option>
<option style="background-color: gray; color: lightblue;"> Mango </option>
<option> Watermelon </option>
</select>

It's not really disabled, but you can't choose it.

Try it!

Old Pedant
05-30-2012, 11:50 PM
Chump's answer does work in MSIE 9. Just checked it.

But you don't need jQuery to do that. Ordinary HTML can do it.



<select>
<option value="Apples">Apples</option>
<option value="Oranges">Oranges</option>
<option value="Bananas">Bananas</option>
<option disabled="disabled" style="color: gray;" value="Mangos">Mangos</option>
<option value="Strawberries">Strawberries</option>
<option value="Kiwis">Kiwis</option>
</select>


And if ordinary HTML can do it, any kind of JS can do it, jQuery or simple JavaScript without resorting to jQuery.

Example:



<select id="fruits">
<option value="Apples">Apples</option>
<option value="Oranges">Oranges</option>
<option value="Bananas">Bananas</option>
<option value="Mangos">Mangos</option>
<option value="Strawberries">Strawberries</option>
<option value="Kiwis">Kiwis</option>
</select>
<script type="text/javascript">
var sel = document.getElementById("fruits");
var opt = sel.options[3];
opt.style.color = "gray";
opt.disabled = true;
</script>
If you are using jQuery for other stuff on the page, go with it. But why introduce the overhead of the entire jQuery library for just this one little thing?

SeattleMicah
05-31-2012, 12:10 AM
OLD USING JQUERY!!!!!!!!!!!!!!!!! :eek: Did you start getting interested back when I started that thread a few months ago? sorry for interrupting thread.

Old Pedant
05-31-2012, 12:13 AM
No no...I was showing that he did not *NEED* to use jQuery! Imagine dragging in jQuery for such a simple little operation as this?? WHY?

Read my last comment: *IF* you are already using jQuery for other things on the page, then fine to use it for this. But if the only reason you dragged it in... Ugh.

SeattleMicah
05-31-2012, 12:18 AM
Pheew!!!!

Old Pedant
05-31-2012, 12:30 AM
Lol!!

chump2877
05-31-2012, 12:41 AM
Old Pendant, once you start using jQuery more, you'll realize the time it saves us programmers writing javascript code....and the more you use jQuery, the less relevant the loading of the minified, Google-hosted jQuery library is...it's really not an issue...

So, these days, when I see a JS related-problem, I think to myself: How can I take advantage of a JS framework that is already loaded in my page? Also, once you start using a framework extensively (any framework, really), it's a good habit to try to code things per the framework's way of doing things. It just makes your life easier...

And if the original poster is not using a JS framework, time to start checking them out! They will save you oodles in development time when used regularly.

Oh...and to hell with IE7 and IE8! :D Especially when it comes to what's easier for the developer. (I'm only half-serious, really.) But if you don't need to cater to those browsers, then don't! If you do, then you'll have to settle on a different solution...

Old Pedant
05-31-2012, 12:49 AM
Well, actually, you can use a combined solution quite easily that degrades nicely.


<select onchange="if ( this.options[this.selectedIndex].style.backgroundColor != '') this.selectedIndex = 0;">

<option value="Apples">Apples</option>
<option value="Oranges">Oranges</option>
<option value="Bananas">Bananas</option>
<option disabled="disabled" style="color: gray;" value="Mangos">Mangos</option>
<option value="Strawberries">Strawberries</option>
<option value="Kiwis">Kiwis</option>
</select>

For browser that do support disabled options, that Mangos option will never get selected and so the if test in the onchange will never get triggered.

But for MSIE 7 and 8, where the disabled is ignored, the if test provides a fallback.

(This all works however you apply the disabled and color to the option, in HTML, plain JS, or jQuery.)

And I stand by my answer: *IF* you only included jQuery for this one purpose on the page, I wouldn't have done it. But that is a big "IF".

chump2877
05-31-2012, 01:05 AM
What's really tragic is that XP users can't upgrade to IE9. So you still have to take into serious consideration previous versions of IE (depending on your target audience) when writing your code...

On the upside, I read somewhere that a study now ranked browsers as follows, in order of popularity:

1) Chrome
2) Firefox
3) IE

So hopefully IE will eventually die a quiet death, and we can all move on to happier days! :D

Old Pedant
05-31-2012, 01:11 AM
So hopefully IE will eventually die a quiet death, and we can all move on to happier days! :D

Amen. At a minimum, all but IE 9 will, one can presume.

Logic Ali
05-31-2012, 02:36 AM
I have the following code, but it doesn't seem to work



document.getElementById('fruits').options['Mangos'].disabled = true


That is not the correct way to address an option, so cannot work even if the browser supports the disabled attribute.

The following will work regardless of support for the disabled attribute. If the attribute is not supported, selecting a 'disabled' option clears the current selection iinstead.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>HTML Template</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />

</head>

<body>

<select id='fruits'>
<option value="Apples">Apples</option>
<option value="Oranges">Oranges</option>
<option value="Bananas">Bananas</option>
<option value="Mangos">Mangos</option>
<option value="Strawberries">Strawberries</option>
<option value="Kiwis">Kiwis</option>
</select>

<script type="text/javascript">

function ignoreDisabledOptions( box )
{
box.onchange = function()
{
if( this.options[ this.selectedIndex ].toIgnore )
this.selectedIndex = -1;
}
}

function toggleOption( box, optText, action ) // action == disabled status
{
var opts = box.options;

for( var i = 0; i < opts.length; i++ )
if( opts[ i ].text == optText )
{
opts[ i ].disabled = action;
opts[ i ].toIgnore = action;
opts[ i ].style.color = action ? 'grey' : '';
}
}

toggleOption( document.getElementById( 'fruits' ), 'Mangos', true );

ignoreDisabledOptions( document.getElementById( 'fruits' ) );

</script>

</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum