Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Mar 2013
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Hide or show multiple dropdown OnChange of multiple dropdowns (possible ??)

    Hi all

    I posted this same question in another forum but I think it was in the wrong place - so sorry for butting into yours :-)


    Without placing lots of Divs within each Div, is there a way to hide or show dropdowns where there are multiple drops on a form.

    I can do with by placing a seperate Javescript for each line 9div) but I was thinking there MUST be a better way of doing this.

    Does anyone have any ideas or a link to a page that gives details

    Thanks

    Karen





    If you cut and past this code you'll see what I mean - I want to show or hide certain dropdowns OnChange of an other dropdown



    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <%@ Page Language="C#" %>
    <html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
    
    <head runat="server">
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>test</title>
    <script type="text/javascript">
    function selectlines() {
    var numdivs = 3;
    var num = document.getElementById("DropDownList0").value;
    for (var i =1; i<=numdivs; i++) {
    var which = "line" + i;  
    document.getElementById(which).style.display = num>=i? "block" : "none";
    }}
    </script>
    
    </head>
    
    <body>
    <form id="form1" runat="server">
    	Select lines to view
    	<asp:DropDownList id="DropDownList0" runat="server" onchange="selectlines();" >
    		<asp:listitem Value="0"></asp:listitem>
    		<asp:listitem>1</asp:listitem>
    		<asp:listitem>2</asp:listitem>
    		<asp:listitem>3</asp:listitem>
    	</asp:DropDownList>
    <br /><br />
    <div id="line1" style="display:none">
    	<asp:DropDownList id="DropDownList1" runat="server">
    		<asp:listitem>select</asp:listitem>
    		<asp:listitem>Show 1st dropdown</asp:listitem>
    		<asp:listitem>Show no dropdowns</asp:listitem>
    		<asp:listitem>Show 2nd and 3rd dropdown</asp:listitem>
    		<asp:listitem>Show all dropdowns except 1st</asp:listitem>
    	</asp:DropDownList>
    &nbsp;<asp:DropDownList id="Line1_DDL_1" runat="server">
    		<asp:listitem>Select</asp:listitem>
    		<asp:listitem>Item 1</asp:listitem>
    		<asp:listitem>Item 2</asp:listitem>
    		<asp:listitem>Item 3</asp:listitem>
    	</asp:DropDownList>
    &nbsp;<asp:DropDownList id="Line1_DDL_2" runat="server">
    		<asp:listitem>Select</asp:listitem>
    		<asp:listitem>Item 1</asp:listitem>
    		<asp:listitem>Item 2</asp:listitem>
    		<asp:listitem>Item 3</asp:listitem>
    	</asp:DropDownList>
    &nbsp;<asp:DropDownList id="Line1_DDL_3" runat="server">
    		<asp:listitem>Select</asp:listitem>
    		<asp:listitem>Item 1</asp:listitem>
    		<asp:listitem>Item 2</asp:listitem>
    		<asp:listitem>Item 3</asp:listitem>
    	</asp:DropDownList>
    	&nbsp;<asp:DropDownList id="Line1_DDL_4" runat="server">
    		<asp:listitem>Select</asp:listitem>
    		<asp:listitem>Item 1</asp:listitem>
    		<asp:listitem>Item 2</asp:listitem>
    		<asp:listitem>Item 3</asp:listitem>
    	</asp:DropDownList>
    </div>
    <br />
    <div id="line2" style="display:none">
    	<asp:DropDownList id="DropDownList2" runat="server" >
    		<asp:listitem>select</asp:listitem>
    		<asp:listitem>Show 1st dropdown</asp:listitem>
    		<asp:listitem>Show no dropdowns</asp:listitem>
    		<asp:listitem>Show 2nd and 3rd dropdown</asp:listitem>
    		<asp:listitem>Show all dropdowns except 1st</asp:listitem>
    	</asp:DropDownList>
    &nbsp;<asp:DropDownList id="Line2_DDL_1" runat="server">
    		<asp:listitem>Select</asp:listitem>
    		<asp:listitem>Item 1</asp:listitem>
    		<asp:listitem>Item 2</asp:listitem>
    		<asp:listitem>Item 3</asp:listitem>
    	</asp:DropDownList>
    &nbsp;<asp:DropDownList id="Line2_DDL_2" runat="server">
    		<asp:listitem>Select</asp:listitem>
    		<asp:listitem>Item 1</asp:listitem>
    		<asp:listitem>Item 2</asp:listitem>
    		<asp:listitem>Item 3</asp:listitem>
    	</asp:DropDownList>
    &nbsp;<asp:DropDownList id="Line2_DDL_3" runat="server">
    		<asp:listitem>Select</asp:listitem>
    		<asp:listitem>Item 1</asp:listitem>
    		<asp:listitem>Item 2</asp:listitem>
    		<asp:listitem>Item 3</asp:listitem>
    	</asp:DropDownList>
    	&nbsp;<asp:DropDownList id="Line2_DDL_4" runat="server">
    		<asp:listitem>Select</asp:listitem>
    		<asp:listitem>Item 1</asp:listitem>
    		<asp:listitem>Item 2</asp:listitem>
    		<asp:listitem>Item 3</asp:listitem>
    	</asp:DropDownList>
    </div>
    <br />
    <div id="line3" style="display:none">
    	<asp:DropDownList id="DropDownList3" runat="server">
    		<asp:listitem>select</asp:listitem>
    		<asp:listitem>Show 1st dropdown</asp:listitem>
    		<asp:listitem>Show no dropdowns</asp:listitem>
    		<asp:listitem>Show 2nd and 3rd dropdown</asp:listitem>
    		<asp:listitem>Show all dropdowns except 1st</asp:listitem>
    	</asp:DropDownList>
    &nbsp;<asp:DropDownList id="Line3_DDL_1" runat="server">
    		<asp:listitem>Select</asp:listitem>
    		<asp:listitem>Item 1</asp:listitem>
    		<asp:listitem>Item 2</asp:listitem>
    		<asp:listitem>Item 3</asp:listitem>
    	</asp:DropDownList>
    &nbsp;<asp:DropDownList id="Line3_DDL_2" runat="server">
    		<asp:listitem>Select</asp:listitem>
    		<asp:listitem>Item 1</asp:listitem>
    		<asp:listitem>Item 2</asp:listitem>
    		<asp:listitem>Item 3</asp:listitem>
    	</asp:DropDownList>
    &nbsp;<asp:DropDownList id="Line3_DDL_3" runat="server">
    		<asp:listitem>Select</asp:listitem>
    		<asp:listitem>Item 1</asp:listitem>
    		<asp:listitem>Item 2</asp:listitem>
    		<asp:listitem>Item 3</asp:listitem>
    	</asp:DropDownList>
    	&nbsp;<asp:DropDownList id="Line3_DDL_4" runat="server">
    		<asp:listitem>Select</asp:listitem>
    		<asp:listitem>Item 1</asp:listitem>
    		<asp:listitem>Item 2</asp:listitem>
    		<asp:listitem>Item 3</asp:listitem>
    	</asp:DropDownList>
    
    </div>
    	<br />
    </form>
    </body>
    
    </html>

  • #2
    New Coder
    Join Date
    Jan 2013
    Location
    Sunnyvale, CA
    Posts
    98
    Thanks
    6
    Thanked 7 Times in 7 Posts
    asp:dropdown objects turn into regular selection controls in the rendered HMTL.

    Group them all with a common name attribute-value, then use javascript's getElementsByTagName to access them. A function can receive arguments identifying which ones are to be hidden. Commence by looping through them and setting them all to style.display = 'inline', with the exception of those in the argument list that are to be styled display = "none".

    ...of course, there's more ways than one to skin a cat.

  • #3
    New Coder
    Join Date
    Mar 2013
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hi

    THanks for the help. I am new to JS so this is all a little strange (I'm a quick learner though :-)

    I had a look at
    http://www.w3schools.com/jsref/met_d...sbytagname.asp
    and even that seem to produce the wrong results (there are only 3 inputs but the results is 4)

    Do you (or anyone) have a link to a site that may give some example which I can study and learn from.

    Thanks again

    Karen

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,083
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    Quote Originally Posted by Reflo2 View Post
    Hi

    THanks for the help. I am new to JS so this is all a little strange (I'm a quick learner though :-)

    I had a look at
    http://www.w3schools.com/jsref/met_d...sbytagname.asp
    and even that seem to produce the wrong results (there are only 3 inputs but the results is 4)

    Do you (or anyone) have a link to a site that may give some example which I can study and learn from.

    Thanks again

    Karen
    Look at the code again.
    There are 4 <input> tags. 3 are type="text" and the 4th is type="button"
    If you want to see '3', then you need extra logic.

    Play with the code...
    Code:
    <html>
    <head>
    <script>
    function getElements() {
      var x=document.getElementsByTagName("input"); alert(x.length + ' total in script');
      var count = 0;
      for (var i=0; i<x.length; i++) { 
        if (x[i].type == 'text') { count++; }
      }
      alert(count+' total visible for keyboard text entry');
    }
    </script>
    </head>
    <body>
    
    <input type="text" size="20"><br>
    <input type="text" size="20"><br>
    <input type="text" size="20"><br><br>
    <input type="button" onclick="getElements()" value="How many input elements?">
    
    </body>
    </html>
    Last edited by jmrker; 03-09-2013 at 03:11 AM.

  • #5
    New Coder
    Join Date
    Mar 2013
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I have done some (a lot) of studying and have come up with this, which "almost" works.

    I have tried to use naming conventios but this failed.

    I would like the dropdowns to appear for each record/input/line (sorry I can't think of the name), but all the JS applies to the first only.

    Any ideas would be a great help

    Thanks

    Karen

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html>
    
    <head>
    <meta content="text/html;charset=iso-8859-1" http-equiv="content-type">
    <title>Untitled Page</title>
    <script type="text/javascript"><!--
    var lastDiv = "";
    function showDiv(divName) {
    	if (lastDiv) {
    		document.getElementById(lastDiv).className = "hiddenDiv";
    	}
    	if (divName && document.getElementById(divName)) {
    		document.getElementById(divName).className = "visibleDiv";
    		lastDiv = divName;
    	}
    }
    
    </script>
    <style type="text/css">
    .hiddenDiv {
    	display: none;
    }
    .visibleDiv {
    	display: block;
    }
    
    </style>
    </head>
    
    <body>
    
    <form id="form1" runat="server">
    	<div id="Div1">
    		<table>
    			<tr>
    				<td>
    				<table style="width: 100%">
    					<tr>
    						<td>Detail</td>
    						<td>Select</td>
    					</tr>
    					<tr>
    						<td>
    						<asp:TextBox id="TextBox1" runat="server" Width="179px"></asp:TextBox>
    						</td>
    						<td>
    						<select name="select" onchange="showDiv(this.value);">
    						<option value=""></option>
    						<option value="one">Show 1st</option>
    						<option value="two">Show 2nd to 4th</option>
    						<option value="two">Show 2nd to 4th</option>
    						</select></td>
    					</tr>
    				</table>
    				</td>
    				<td>
    				<div id="one" class="hiddenDiv">
    					<table>
    						<tr>
    							<td>1st</td>
    						</tr>
    						<tr>
    							<td>
    							<asp:DropDownList id="DDL1st_1" runat="server" Width="60px">
    					<asp:listitem></asp:listitem>
    					<asp:listitem>1</asp:listitem>
    					<asp:listitem>2</asp:listitem>
    					<asp:listitem>3</asp:listitem>
    					<asp:listitem>4</asp:listitem>
    					<asp:listitem>5</asp:listitem>
    							</asp:DropDownList>
    							</td>
    						</tr>
    					</table>
    				</div>
    				<div id="two" class="hiddenDiv">
    					<table>
    						<tr>
    							<td>2nd</td>
    							<td>3rd</td>
    							<td>4th</td>
    						</tr>
    						<tr>
    							<td>
    							<asp:DropDownList id="DDL2nd_1" runat="server" Width="60px">
    					<asp:listitem></asp:listitem>
    					<asp:listitem>1</asp:listitem>
    					<asp:listitem>2</asp:listitem>
    					<asp:listitem>3</asp:listitem>
    					<asp:listitem>4</asp:listitem>
    					<asp:listitem>5</asp:listitem>
    					
    							</asp:DropDownList>
    							</td>
    							<td>
    							<asp:DropDownList id="DDL3rd_1" runat="server" Width="60px">
    					<asp:listitem></asp:listitem>
    					<asp:listitem>1</asp:listitem>
    					<asp:listitem>2</asp:listitem>
    					<asp:listitem>3</asp:listitem>
    					<asp:listitem>4</asp:listitem>
    					<asp:listitem>5</asp:listitem>
    							</asp:DropDownList>
    							</td>
    							<td>
    							<asp:DropDownList id="DDL4th_1" runat="server" Width="60px">
    					<asp:listitem></asp:listitem>
    					<asp:listitem>1</asp:listitem>
    					<asp:listitem>2</asp:listitem>
    					<asp:listitem>3</asp:listitem>
    					<asp:listitem>4</asp:listitem>
    					<asp:listitem>5</asp:listitem>
    							</asp:DropDownList>
    							</td>
    						</tr>
    					</table>
    				</div>
    				</td>
    			</tr>
    		</table>
    	</div>
    	<div id="Div2">
    		<table>
    			<tr>
    				<td>
    				<table style="width: 100%">
    					<tr>
    						<td>Detail</td>
    						<td>Select</td>
    					</tr>
    					<tr>
    						<td>
    						<asp:TextBox id="TextBox2" runat="server" Width="179px"></asp:TextBox>
    						</td>
    						<td>
    						<select name="selectName" onchange="showDiv(this.value);">
    						<option value=""></option>
    						<option value="one">Show 1st</option>
    						<option value="two">Show 2nd to 4th</option>
    						<option value="two">Show 2nd to 4th</option>
    						</select></td>
    					</tr>
    				</table>
    				</td>
    				<td>
    				<div id="one" class="hiddenDiv">
    					<table>
    						<tr>
    							<td>1st</td>
    						</tr>
    						<tr>
    							<td>
    							<asp:DropDownList id="DDL1st_2" runat="server" Width="60px">
    					<asp:listitem></asp:listitem>
    					<asp:listitem>1</asp:listitem>
    					<asp:listitem>2</asp:listitem>
    					<asp:listitem>3</asp:listitem>
    					<asp:listitem>4</asp:listitem>
    					<asp:listitem>5</asp:listitem>
    							</asp:DropDownList>
    							</td>
    						</tr>
    					</table>
    				</div>
    				<div id="two" class="hiddenDiv">
    					<table>
    						<tr>
    							<td>2nd</td>
    							<td>3rd</td>
    							<td>4th</td>
    						</tr>
    						<tr>
    							<td>
    							<asp:DropDownList id="DDL2nd_2" runat="server" Width="60px">
    					<asp:listitem></asp:listitem>
    					<asp:listitem>1</asp:listitem>
    					<asp:listitem>2</asp:listitem>
    					<asp:listitem>3</asp:listitem>
    					<asp:listitem>4</asp:listitem>
    					<asp:listitem>5</asp:listitem>
    					
    							</asp:DropDownList>
    							</td>
    							<td>
    							<asp:DropDownList id="DDL3rd_2" runat="server" Width="60px">
    					<asp:listitem></asp:listitem>
    					<asp:listitem>1</asp:listitem>
    					<asp:listitem>2</asp:listitem>
    					<asp:listitem>3</asp:listitem>
    					<asp:listitem>4</asp:listitem>
    					<asp:listitem>5</asp:listitem>
    							</asp:DropDownList>
    							</td>
    							<td>
    							<asp:DropDownList id="DDL4th_2" runat="server" Width="60px">
    					<asp:listitem></asp:listitem>
    					<asp:listitem>1</asp:listitem>
    					<asp:listitem>2</asp:listitem>
    					<asp:listitem>3</asp:listitem>
    					<asp:listitem>4</asp:listitem>
    					<asp:listitem>5</asp:listitem>
    							</asp:DropDownList>
    							</td>
    						</tr>
    					</table>
    				</div>
    				</td>
    			</tr>
    		</table>
    	</div>
    </form>
    
    </body>
    
    </html>

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 503 Times in 490 Posts
    best to avoid global variables(declared outside a function)

    Code:
    function showDiv(divName) {
        var div=document.getElementById(divName);
    	if (showDiv.lastDiv) {
    		showDiv.lastDiv.className = "hiddenDiv";
    	}
    	if (div) {
    		div.className = "visibleDiv";
    		showDiv.lastDiv = div;
    	}
    }
    uses a property of the function to store the lastDiv
    and a local variable to reduce the code size
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #7
    New Coder
    Join Date
    Mar 2013
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hi VWPhilps

    Thank you for the tip.

    But this still leave the same problem.

    The function doesn't point (I can't think of a better word) at the specific dropdown.

    So if you select something on the 2nd drop down it will affect the divs that are shown in the 1st div.

    There will be around 8 or 9 divs on the form I'm making each with:
    Details, Select dropdown and then a number of options to choose from.

    I need the function to point "only" at the line being used by the users.

    Here is the amended code, given by you, and thanks for this.


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html>
    
    <head>
    <meta content="text/html;charset=iso-8859-1" http-equiv="content-type">
    <title>Untitled Page</title>
    <script type="text/javascript"><!--
    var lastDiv = "";
    function showDiv(divName) {
    	if (lastDiv) {
    		document.getElementById(lastDiv).className = "hiddenDiv";
    	}
    	if (divName && document.getElementById(divName)) {
    		document.getElementById(divName).className = "visibleDiv";
    		lastDiv = divName;
    	}
    }
    
    </script>
    <style type="text/css">
    .hiddenDiv {
    	display: none;
    }
    .visibleDiv {
    	display: block;
    }
    
    </style>
    </head>
    
    <body>
    
    <form id="form1" runat="server">
    	<div id="Div1">
    		<table>
    			<tr>
    				<td>
    				<table style="width: 100%">
    					<tr>
    						<td>Detail</td>
    						<td>Select</td>
    					</tr>
    					<tr>
    						<td>
    						<asp:TextBox id="TextBox1" runat="server" Width="179px"></asp:TextBox>
    						</td>
    						<td>
    						<select name="select" onchange="showDiv(this.value);">
    						<option value=""></option>
    						<option value="one">Show 1st</option>
    						<option value="two">Show 2nd to 4th</option>
    						<option value="two">Show 2nd to 4th</option>
    						</select></td>
    					</tr>
    				</table>
    				</td>
    				<td>
    				<div id="one" class="hiddenDiv">
    					<table>
    						<tr>
    							<td>1st</td>
    						</tr>
    						<tr>
    							<td>
    							<asp:DropDownList id="DDL1st_1" runat="server" Width="60px">
    					<asp:listitem></asp:listitem>
    					<asp:listitem>1</asp:listitem>
    					<asp:listitem>2</asp:listitem>
    					<asp:listitem>3</asp:listitem>
    					<asp:listitem>4</asp:listitem>
    					<asp:listitem>5</asp:listitem>
    							</asp:DropDownList>
    							</td>
    						</tr>
    					</table>
    				</div>
    				<div id="two" class="hiddenDiv">
    					<table>
    						<tr>
    							<td>2nd</td>
    							<td>3rd</td>
    							<td>4th</td>
    						</tr>
    						<tr>
    							<td>
    							<asp:DropDownList id="DDL2nd_1" runat="server" Width="60px">
    					<asp:listitem></asp:listitem>
    					<asp:listitem>1</asp:listitem>
    					<asp:listitem>2</asp:listitem>
    					<asp:listitem>3</asp:listitem>
    					<asp:listitem>4</asp:listitem>
    					<asp:listitem>5</asp:listitem>
    					
    							</asp:DropDownList>
    							</td>
    							<td>
    							<asp:DropDownList id="DDL3rd_1" runat="server" Width="60px">
    					<asp:listitem></asp:listitem>
    					<asp:listitem>1</asp:listitem>
    					<asp:listitem>2</asp:listitem>
    					<asp:listitem>3</asp:listitem>
    					<asp:listitem>4</asp:listitem>
    					<asp:listitem>5</asp:listitem>
    							</asp:DropDownList>
    							</td>
    							<td>
    							<asp:DropDownList id="DDL4th_1" runat="server" Width="60px">
    					<asp:listitem></asp:listitem>
    					<asp:listitem>1</asp:listitem>
    					<asp:listitem>2</asp:listitem>
    					<asp:listitem>3</asp:listitem>
    					<asp:listitem>4</asp:listitem>
    					<asp:listitem>5</asp:listitem>
    							</asp:DropDownList>
    							</td>
    						</tr>
    					</table>
    				</div>
    				</td>
    			</tr>
    		</table>
    	</div>
    	<div id="Div2">
    		<table>
    			<tr>
    				<td>
    				<table style="width: 100%">
    					<tr>
    						<td>Detail</td>
    						<td>Select</td>
    					</tr>
    					<tr>
    						<td>
    						<asp:TextBox id="TextBox2" runat="server" Width="179px"></asp:TextBox>
    						</td>
    						<td>
    						<select name="selectName" onchange="showDiv(this.value);">
    						<option value=""></option>
    						<option value="one">Show 1st</option>
    						<option value="two">Show 2nd to 4th</option>
    						<option value="two">Show 2nd to 4th</option>
    						</select></td>
    					</tr>
    				</table>
    				</td>
    				<td>
    				<div id="one" class="hiddenDiv">
    					<table>
    						<tr>
    							<td>1st</td>
    						</tr>
    						<tr>
    							<td>
    							<asp:DropDownList id="DDL1st_2" runat="server" Width="60px">
    					<asp:listitem></asp:listitem>
    					<asp:listitem>1</asp:listitem>
    					<asp:listitem>2</asp:listitem>
    					<asp:listitem>3</asp:listitem>
    					<asp:listitem>4</asp:listitem>
    					<asp:listitem>5</asp:listitem>
    							</asp:DropDownList>
    							</td>
    						</tr>
    					</table>
    				</div>
    				<div id="two" class="hiddenDiv">
    					<table>
    						<tr>
    							<td>2nd</td>
    							<td>3rd</td>
    							<td>4th</td>
    						</tr>
    						<tr>
    							<td>
    							<asp:DropDownList id="DDL2nd_2" runat="server" Width="60px">
    					<asp:listitem></asp:listitem>
    					<asp:listitem>1</asp:listitem>
    					<asp:listitem>2</asp:listitem>
    					<asp:listitem>3</asp:listitem>
    					<asp:listitem>4</asp:listitem>
    					<asp:listitem>5</asp:listitem>
    					
    							</asp:DropDownList>
    							</td>
    							<td>
    							<asp:DropDownList id="DDL3rd_2" runat="server" Width="60px">
    					<asp:listitem></asp:listitem>
    					<asp:listitem>1</asp:listitem>
    					<asp:listitem>2</asp:listitem>
    					<asp:listitem>3</asp:listitem>
    					<asp:listitem>4</asp:listitem>
    					<asp:listitem>5</asp:listitem>
    							</asp:DropDownList>
    							</td>
    							<td>
    							<asp:DropDownList id="DDL4th_2" runat="server" Width="60px">
    					<asp:listitem></asp:listitem>
    					<asp:listitem>1</asp:listitem>
    					<asp:listitem>2</asp:listitem>
    					<asp:listitem>3</asp:listitem>
    					<asp:listitem>4</asp:listitem>
    					<asp:listitem>5</asp:listitem>
    							</asp:DropDownList>
    							</td>
    						</tr>
    					</table>
    				</div>
    				</td>
    			</tr>
    		</table>
    	</div>
    </form>
    
    </body>
    
    </html>

  • #8
    Regular Coder
    Join Date
    Sep 2010
    Location
    Far far away
    Posts
    122
    Thanks
    0
    Thanked 16 Times in 16 Posts
    Quote Originally Posted by Reflo2 View Post
    is there a way to hide or show dropdowns where there are multiple drops on a form.
    Answering for your question. These links below have some information related to your question.
    Showing and hiding layers with javascript and CSS (HELP)
    Showing and hiding layers with javascript and CSS (HELP)

    if you find them useful and applicable to your task just try to adapt it to your task. Be sure it works with more than one toggler per page.

  • #9
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,083
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    Quote Originally Posted by siberia-man View Post
    Answering for your question. These links below have some information related to your question.
    Showing and hiding layers with javascript and CSS (HELP)
    Showing and hiding layers with javascript and CSS (HELP)

    if you find them useful and applicable to your task just try to adapt it to your task. Be sure it works with more than one toggler per page.
    Here's a modification to the second link from above that you may find interesting...
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> CSS toggler </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <style type="text/css">
    /* This rule will be applied to hide element on the page */
     .hidden { display: none; }
    </style>
    
    <script type="text/javascript">
    
    // Checks that the class 'className' is defined for the element 'el'
    function hasClass(el, className) {
        var re = new RegExp('(?:^|\\s+)' + className + '(?:\\s+|$)', 'g');
        return re.test(el.className);
    };
    
    // Adds the class 'className' to the element 'el'
    function addClass(el, className) {
        if ( ! hasClass(el, className) ) {
            el.className += ' ' + className;
        }
    };
    
    // removes the class 'className' from the element 'el'
    function delClass(el, className) {
        var re = new RegExp('(?:^|\\s+)' + className + '(?:\\s+|$)', 'g');
        el.className = el.className.replace(re, ' ');
    };
    
    // Toggles the class 'className' to the element 'el'
    function toggleClass(el, className) {
        if ( hasClass(el, className) ) { delClass(el, className); }
                                  else { addClass(el, className);
        }
    };
    
    </script>
    </head>
    <body>
    
    <div id="togglerInformation">
     <h2>Click to toggle the 'Lorem Ipsum' text</h2>
     <div id="toggled_0" class="hidden" style="height:100px; width:400px; border:1px solid  blue; overflow:auto; ">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </div>
    
     <h2>Click to toggle Shakespeare's quotation</h2>
     <pre id="toggled_1" class="hidden">
      To be, or not to be, that is the question;
      Whether 'tis nobler in the mind to suffer
      The Slings and Arrows of outrageous Fortune
      Or to take arms against a sea of troubles,
      And by opposing, end them. To die, to sleep;
      No more; and by a sleep to say we end
      The heart-ache and the thousand natural shocks
      That flesh is heir to — 'tis a consummation
     </pre>
    </div>
    
    <script type="text/javascript">
    // From: http://www.codingforums.com/showthread.php?p=1319625#post1319625
    // and from: http://www.codingforums.com/showpost.php?p=1005402&postcount=15
    
    ( function () {
    /* After the page will be downloaded define the event onclick for 
     * the 'h1' element that will toggle visibility of another element -- 'div' or 'pre' */
    
      window.onload = function() {
        var togglers = document.getElementById('togglerInformation').getElementsByTagName('h2');
        for (var i=0; i<togglers.length; i++) { togglers[i].id = 'toggler_'+i; togglers[i].value = 'toggled_'+i; } 
        for (var i=0; i<togglers.length; i++) {
          document.getElementById(togglers[i].id).onclick = function() { tBtoggled(this.value); }
        }
      };
      function tBtoggled(IDS) { toggleClass(document.getElementById(IDS), 'hidden'); }
    } )();
    </script>
    
    </body>
    <html>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •