Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Onchange of an item in the dropdownlist, should enable or disable associated options in the dropdownlist

Posted on 2004-10-08
5
Medium Priority
?
2,480 Views
Last Modified: 2008-02-01
I have a dropdownlist consisting of two options.  Say A and B.  (A and B are also dropdownlists)
Now if i select option A then, option A is enabled and option B is disabled.
And if i select option B then, option B is enabled and option A is disabled.
My application is in ASP.NET.
 
Can you provide me with some example code.  Any help would be appreciated.
0
Comment
Question by:anagm
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
5 Comments
 
LVL 29

Expert Comment

by:David H.H.Lee
ID: 12260282
anaqm,
Try this :

html
---------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
      <HEAD>
            <title>enabledisableDrp</title>
            <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
            <meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">
            <meta name="vs_defaultClientScript" content="JavaScript">
            <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
      </HEAD>
      <body MS_POSITIONING="GridLayout">
            <form id="Form1" method="post" runat="server">
                  <asp:DropDownList id="drpA" style="Z-INDEX: 101; LEFT: 48px; POSITION: absolute; TOP: 48px" runat="server"></asp:DropDownList>
                  <asp:DropDownList id="drpB" style="Z-INDEX: 102; LEFT: 48px; POSITION: absolute; TOP: 80px" runat="server"></asp:DropDownList>
                  <asp:Label id="Label1" style="Z-INDEX: 103; LEFT: 16px; POSITION: absolute; TOP: 48px" runat="server">A</asp:Label>
                  <asp:Label id="Label2" style="Z-INDEX: 104; LEFT: 16px; POSITION: absolute; TOP: 80px" runat="server">B</asp:Label>
                  <br>
                  <br>
                  <br>
                  <br>
                  <br>
                  <br>
                  <br>
                  <br>
                  <input type="button" id="btnreset" name="btnreset" value="reset" onClick="document.getElementById('drpA').disabled=false;document.getElementById('drpB').disabled=false;"/>
            </form>
      </body>
</HTML>

code-behind
----------------
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        'Put user code to initialize the page here
        If Not IsPostBack Then
            BindData()
        End If

        drpA.Attributes.Add("onChange", "document.getElementById('drpB').disabled=true;")
        drpB.Attributes.Add("onChange", "document.getElementById('drpA').disabled=true;")
    End Sub

    Sub BindData()
        Dim ar As New ArrayList

        ar.Add("1")
        ar.Add("2")
        ar.Add("3")

        drpA.DataSource = ar
        drpA.DataBind()

        drpB.DataSource = ar
        drpB.DataBind()
    End Sub

Regards
x_com
0
 
LVL 8

Expert Comment

by:inq123
ID: 12260340
Hi anagm,

<html>
<script>
function test(a, b)
{
  a.disabled = false;
  b.disabled = true;
}
</script>
<form name=test1>
<select name=s1 onFocus="javascript:test(document.test1.s1, document.test1.s2)">
<option name=dummy>dummy</option>
</select>
<select name=s2 onFocus="javascript:test(document.test1.s2, document.test1.s1)">
<option name=dummy>dummy</option>
</select>
</form>
</html>

Do note that if you select A, then B is disabled and cannot be selected again. So you need to either refresh the page, or add another button that says "enable B" and for that button you put an onFocus="javascript:test(document.test1.s2, document.test1.s1)"

Cheers!
0
 
LVL 13

Accepted Solution

by:
cLFlaVA earned 1500 total points
ID: 12260375
Three selects:  the first drives the other two;



<!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="">

<script language="javascript">
<!--

function doChange() {
    document.forms['the_form'].elements['sub1'].disabled = true;
      document.forms['the_form'].elements['sub2'].disabled = true;
      document.forms['the_form'].elements[document.forms['the_form'].elements['main'].value].disabled = false;

}


-->
</script>

</HEAD>

<body onload="rowFun();">
<form name="the_form">

<select name="main" onchange="doChange();">
<option value="sub1">sub1</option>
<option value="sub2">sub2</option>
</select>

<select name="sub1">
<option>hello</option>
<option>hello</option>
</select>

<select name="sub2" disabled>
<option>hello</option>
<option>hello</option>
</select>
</form>

</BODY>
</HTML>
0
 

Author Comment

by:anagm
ID: 12288827
I am using a dropdownlist control with onselectedindexchanged event handler.

My application has(.NET) has three dropdownlists A, B, C

Dropdownlist A --- contains both B and C

If i select option B then Dropdown B should be enabled and Dropdown C is disabled
If i select option C then Dropdown C should be enabled and Dropdown B is disabled

Can i get some help with some example code for the event handler(C#) too

any help would be appreciated

0
 
LVL 29

Expert Comment

by:David H.H.Lee
ID: 12294088
anagm ,
what you need is javascript, not server event.
eg:

code-behind
-----------------
private void Page_Load(object sender, System.EventArgs e)
      {
                  // Put user code to initialize the page here
                  if(!IsPostBack)
                  {
                        BindData();
                  }

                   drpA.Attributes.Add("onChange", "return enableDisable()");
            }

            void BindData()
            {
                  ArrayList ar = new ArrayList();
                  
                  ar.Add("-- Select --");
                  ar.Add("A");
                  ar.Add("B");
                  ar.Add("C");

                  drpA.DataSource = ar;
                  drpA.DataBind();

                  drpB.DataSource = ar;
                  drpB.DataBind();

                  drpC.DataSource = ar;
                  drpC.DataBind();
            }

html
----------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
      <HEAD>
            <title>enabledisableDrp</title>
            <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
            <meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">
            <meta name="vs_defaultClientScript" content="JavaScript">
            <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
            <script>
            function enableDisable()
            {
                  var dropdownlistA,dropdownlistB,dropdownlistC;
                  dropdownlistA=document.getElementById('drpA');
                  dropdownlistB=document.getElementById('drpB');
                  dropdownlistC=document.getElementById('drpC');
                  
                  if(dropdownlistA.options[dropdownlistA.selectedIndex].value=='B')
                  {
                        dropdownlistB.disabled=false;
                        dropdownlistC.disabled=true;
                  }
                  else if(dropdownlistA.options[dropdownlistA.selectedIndex].value=='C')
                  {
                        dropdownlistB.disabled=true;
                        dropdownlistC.disabled=false;
                  }
            }
            </script>
      </HEAD>
      <body MS_POSITIONING="GridLayout">
            <form id="Form1" method="post" runat="server">
                  <asp:DropDownList id="drpA" style="Z-INDEX: 100; LEFT: 48px; POSITION: absolute; TOP: 48px" runat="server"></asp:DropDownList>
                  <asp:DropDownList id="drpC" style="Z-INDEX: 107; LEFT: 48px; POSITION: absolute; TOP: 112px" runat="server"></asp:DropDownList>
                  <asp:Label id="Label3" style="Z-INDEX: 106; LEFT: 16px; POSITION: absolute; TOP: 112px" runat="server">C</asp:Label>
                  <asp:DropDownList id="drpB" style="Z-INDEX: 101; LEFT: 48px; POSITION: absolute; TOP: 80px" runat="server"></asp:DropDownList>
                  <asp:Label id="Label1" style="Z-INDEX: 104; LEFT: 16px; POSITION: absolute; TOP: 48px" runat="server">A</asp:Label>
                  <asp:Label id="Label2" style="Z-INDEX: 105; LEFT: 16px; POSITION: absolute; TOP: 80px" runat="server">B</asp:Label>
            </form>
      </body>
</HTML>

regards
x_com
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

670 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