[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

Disable/Enable OPTION in SELECTBOX with specific value

Posted on 2010-03-22
8
Medium Priority
?
639 Views
Last Modified: 2013-11-19
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 !!
0
Comment
Question by:nguyenhoan
  • 3
  • 2
  • 2
  • +1
8 Comments
 
LVL 22

Expert Comment

by:Om Prakash
ID: 28313854
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
 

Author Comment

by:nguyenhoan
ID: 28314180
I don't want it change to another selectbox, I just want to disabled the specific option on the second select box.
0
 
LVL 22

Expert Comment

by:Om Prakash
ID: 28314276
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
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 

Author Comment

by:nguyenhoan
ID: 28317317
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
 
LVL 4

Accepted Solution

by:
krys2fer earned 1200 total points
ID: 28320991
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
 
LVL 21

Expert Comment

by:masterpass
ID: 28321744
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
 

Author Comment

by:nguyenhoan
ID: 28323979
Oh yeah!
That is exactly what I'm looking for.

Thankyou krys2fer.
0
 
LVL 4

Expert Comment

by:krys2fer
ID: 28326011
Your welcome! Glad I've helped. :-)
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Find out what you should include to make the best professional email signature for your organization.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
The viewer will learn how to count occurrences of each item in an array.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

607 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question