Disable/Enable OPTION in SELECTBOX with specific value

I have 2 select boxs like this:

<select name="list" id="list">
 <option value="0">-- select --</option>
 <option value="1">A</option>
 <option value="2">B</option>
 <option value="3">C</option>
</select>

and

<select name="type" id="type">
 <option value="0">-- select --</option>
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
 <option value="4">4</option>
 <option value="5">5</option>
 <option value="6">6</option>
 ...
</select>

----------------
Please help me to write an onclick function that:

+ When I choose option value = "3" (C) in the select box id="list", it will enable the option value 4, 5, 6 in the select box id="type".

+ When the value is != "3", it will disabled those 4, 5, 6 option in the select box. You just can select 1, 2, or 3 on the select box id="type"

I just can write the function that disabled the whole selectbox, but not with the specific option.

So please help, Experts !!
nguyenhoanAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Om PrakashCommented:
You can re-create the select list with only the options you want to use.
http://www.htmlgoodies.com/tutorials/forms/article.php/3479151

Please check the code
(http://www.webdeveloper.com/forum/archive/index.php/t-58501.html)

function disable(){
if(document.frm.select1.selectedIndex ==1){
document.frm.select2.remove(1);
document.frm.select2.selectedIndex =0;
}
else
document.frm.select2.options[1] = new Option('two',2);
}


<form name="frm" method="post" action="test7.asp">
<select name="select1" onchange="javascript:disable();"> 
<option value="D" selected>Details</option>
<option value="S">Summary</option>
</select>
<select name="select2">
<option value="1" selected>One</option>
<option value="2">two</option>
</select>

Open in new window

0
nguyenhoanAuthor Commented:
I don't want it change to another selectbox, I just want to disabled the specific option on the second select box.
0
Om PrakashCommented:
Please check the following example
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Example</title>
<script language="JavaScript" type="text/javascript">
<!--
var blocked=0;
var disable=0;
function disableOpt(frm,val){
if(val==1){
disable=1;
blocked=1;
document.getElementById('msg').firstChild.data='option 2 has been disabled.';
if(frm.select2.selectedIndex==blocked)
frm.select2.selectedIndex=-1;
}
else{
disable=0;document.getElementById('msg').firstChild.data='all options available.';
}
}
//-->
</script>
</head>
<body>
<form name="myform" action="#">
<select name="select1" size="6" onchange="disableOpt(this.form,this.selectedIndex)" style="float:left">
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
<option>option 4</option>
<option>option 5</option>
<option>option 6</option>
<option>option 7</option>
<option>option 8</option>
<option>option 9</option>
<option>option 10</option>
</select>
<select name="select2" size="6" onchange="if(disable==1&&this.options[blocked].selected){ this.selectedIndex = -1;}" style="float: left">
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
<option>option 4</option>
<option>option 5</option>
<option>option 6</option>
<option>option 7</option>
<option>option 8</option>
<option>option 9</option>
<option>option 10</option>
</select>
<div>Status of select 2:</div>
<div id="msg">all options available.</div>
<div style="clear:left">Selecting 'option 2' in the first select will disable 'option 2' in the second one.</div>
</form>
</body>
</html>

Open in new window

0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

nguyenhoanAuthor Commented:
Thankyou anyway, but that's NOT what I'm looking for.

What I need is look like this when I choose option = "3" on the select box id="list":
<select name="type" id="type">
 <option value="0">-- select --</option>
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
 <option value="4" disabled>4</option>
 <option value="5" disabled>5</option>
 <option value="6" disabled>6</option>
</select>

Open in new window

0
krys2ferCommented:
Hi,

This reference might be useful: http://snipplr.com/view/6262/disable--select-or-option-in-ie/
For a working example follow the instructions below:

Create and save file named disable.htc and paste the following codes:

<?xml version="1.0" encoding="ISO-8859-1"?>
<PUBLIC:COMPONENT LIGHTWEIGHT="true">
<PUBLIC:ATTACH EVENT="ondocumentready" ONEVENT="onDocumentReady()" />
<PUBLIC:ATTACH EVENT="ondetach" ONEVENT="onDetach()" />

<SCRIPT type="text/javascript">
//<![CDATA[
var nLastSelectedIndex;
var fOnChangeOriginal;
// event handlers
function onDocumentReady() {
var sTag = element.tagName.toLowerCase();
if (sTag == "select") {
attachEvent("onchange", onChangeSelect);
attachEvent("onpropertychange", onPropertyChangeSelect);
nLastSelectedIndex = element.selectedIndex;
hackOnChange();
} else if (sTag == "option") {
attachEvent("onpropertychange", onPropertyChangeOption);
emulateOption();
}
}

function onDetach() {
var sTag = element.tagName.toLowerCase();
if (sTag == "select") {
detachEvent("onchange", onChangeSelect);
detachEvent("onpropertychange", onPropertyChangeSelect);
} else if (sTag == "option") {
detachEvent("onpropertychange", onPropertyChangeOption);
}
}

//
function onChangeSelect() {
if (element.options[element.selectedIndex].disabled) {
element.selectedIndex = nLastSelectedIndex;
} else {
nLastSelectedIndex = element.selectedIndex;
if (fOnChangeOriginal != undefined) {
fOnChangeOriginal();
}
}
}

function onPropertyChangeSelect() {
var sChangedPropertyName = event.propertyName.toLowerCase();
if (sChangedPropertyName == "onchange") {
hackOnChange();
} else if (sChangedPropertyName == "selectedindex") { // contributed by Zecc
nLastSelectedIndex = element.selectedIndex;
}
}

function onPropertyChangeOption() {
var sChangedPropertyName = event.propertyName.toLowerCase();
if (sChangedPropertyName == "disabled") {
emulateOption();
}
}
 
// hack onChange attribute of select tag
 
function hackOnChange() {
detachEvent("onpropertychange", onPropertyChangeSelect);
fOnChangeOriginal = element.onchange;
element.onchange = null;
attachEvent("onpropertychange", onPropertyChangeSelect);
}

// emulate disabled option
function emulateOption() {
if (element.disabled) {
element.style.color = "graytext";
} else {
element.style.color = "menutext";
}
}

//]]>
</SCRIPT>
</PUBLIC:COMPONENT>


Create an html file saved in the same directory of disable.htc and paste the following codes:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">

<!--[if IE]>
<style type="text/css">
select, option { behavior: url("disable.htc"); }
</style>
<![endif]-->

<script type="text/javascript">

      function selectList()
      {
            var list=window.document.getElementById("list");
            var type = window.document.getElementById("type");
            var i;
            var disabledValue;
            if(list.selectedIndex==3)
            {
                  disabledValue=false;
            }
            else
            {
                  disabledValue=true;
            }

            for(i=4;i<=6;i++)
            {
                  type.options[i].disabled=disabledValue;                  
            }
      }
      




</script>

</HEAD>

<BODY>

<select name="list" id="list" onchange="selectList();">
 <option value="0">-- select --</option>
 <option value="1">A</option>
 <option value="2">B</option>
 <option value="3">C</option>
</select>
<br/>
<select name="type" id="type">
 <option value="0">-- select --</option>
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
 <option value="4">4</option>
 <option value="5">5</option>
 <option value="6">6</option>
</select>
</BODY>
</HTML>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
masterpassCommented:
See If you can use this
var list=document.getElementById("list");
var type = document.getElementById("type");
var valueToSet;
if(list.selectedIndex==3)
{
      valueToSet=false;
}
else
{
      valueToSet=true;
}

for(var i=4;i<=6;i++)
{
      type.options[i].setAttribute("disabled", valueToSet);                
}

Open in new window

0
nguyenhoanAuthor Commented:
Oh yeah!
That is exactly what I'm looking for.

Thankyou krys2fer.
0
krys2ferCommented:
Your welcome! Glad I've helped. :-)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.