Disabling an option in a select menu

liunx

Guest
Hi i want to be able to disable specific options in a select menu, in other words make it so certain options cannot actually be chosen. The reason for this is because they are sub headings of different sections.<br />
<br />
I have tried the following<br />
<br />
<select><br />
<option disabled>yada</option><br />
<option>yada</option><br />
<option>yada</option><br />
<option>yada</option><br />
</select><br />
<br />
doesn't seem to work? also tried disabled="disabled"?<br />
<br />
Thanks in advance<!--content-->Hi there wolrabp,<br />
<br />
disabled works in Mozilla 1.4 Netscape 6+ and IE 5 but not in IE 6 - you could say that it has been disabled :D<br />
<br />
coothead<!--content-->To get a crappy version working for current browsers you can do this:<br />
<br />
<br />
<script><br />
function checkdisabled(el) { <br />
if (el.options[el.selectedIndex].disabled) { <br />
alert ("This option is not available!"); el.options.value = ''; } } <br />
</script><br />
<script><br />
function hidedisabledoptions(el) { <br />
if (document.all && !window.opera) { <br />
for (var i = 0; i < el.options.length; i++) { <br />
if (el.options.disabled) { <br />
el.options.style.backgroundColor = 'gray'} } } } <br />
window.onload = function() { hidedisabledoptions(document.getElementById('myselect')) } <br />
</script><br />
<br />
<br />
Add the above into the head part of your site. Then your select menu should look like this:<br />
<br />
<br />
<select id="myselect" onchange="checkdisabled(this)"> <br />
<option>test</option><br />
<option>test3</option><br />
<option>test4</option><br />
<option disabled>test2</option><br />
</select><br />
<br />
<br />
This will put a gray background color for disabled items and popup a box that says "this item is disabled" if someone selects it. <br />
<br />
Modified code from this source: <!-- m --><a class="postlink" href="http://forums.devshed.com/archive/1/2003/6/4/67144">http://forums.devshed.com/archive/1/2003/6/4/67144</a><!-- m --><br />
<br />
Good Luck,<br />
Paul<!--content-->you can't really disable options like that.<br />
<br />
if you want to disable them (make it so it is not selected) then do this<br />
<br />
OptGroup (<!-- m --><a class="postlink" href="http://www.w3.org/TR/html4/interact/forms.html#edef-OPTGROUP">http://www.w3.org/TR/html4/interact/for ... f-OPTGROUP</a><!-- m -->)<br />
<br />
<select><br />
<OPTGROUP label="yada 1"><br />
<option>yada</option><br />
<option>yada</option><br />
<option>yada</option><br />
<option>yada</option><br />
</optgroup><br />
</select><br />
<br />
but you have to remember your values in the options tag.<!--content-->
 
Back
Top