Div to appear based on dropdown selection

**amean_n** · 08-02-2011 10:56 AM

Code:

<div id="1">
<asp:DropDownList  ID="DD1" runat="server">
         <asp:ListItem>option1</asp:ListItem>
         <asp:ListItem>option2</asp:ListItem>
</asp:DropDownList>
</div>

<div id="option2show">
OPTION 2 Content.
<div>

My question is, I want the div with the id of "option2show" to be hidden unless the user has selected option 2 in the dropdown box.

If the user has selected option 1 then nothing will happen, however iff option 2 has been selected then the option2 div will appeaar. I would like this to happen before any submit buttons are press, so i guess onblur of the dropdown box.

Any ideas?

Many thanks

**JMRKER** · 08-02-2011 02:52 PM

I don't know what 'asp' is

, but if you want a JS solution from the JS forum, then try this...

Code:

<!DOCTYPE HTML>
<html>
<head>
<title> Untitled </title>

<script type="text/javascript">
// From: http://www.webdeveloper.com/forum/showthread.php?t=249581

function $_(IDS) { return document.getElementById(IDS); }

function toggle(Info) {
  var CState = $_(Info);
  if (CState.style.display != "block") { CState.style.display = "block"; }
                                  else { CState.style.display = "none"; }
}

function SBoxAction(info) { // alert(info);
  if (info == 2) { toggle('option2show'); }
  $_('SBox').selectedIndex = 0;
}
</script>

</head>
<body>
<div id="1">
<select id="SBox" onchange="SBoxAction(this.selectedIndex)">
 <option>Select</option>
 <option>option1</option>
 <option>option2</option>
</select>
</div>
<p>
<div id="option1show">OPTION 1 Content.<div>
<p>
<div id="option2show" style="display:none">OPTION 2 Content.<div>
</body>
</html>

**amean_n** · 08-03-2011 03:56 AM

Thank you for your reply,

I have got this coe to work, however I would also like it to behave in a way that when the user selects option 1 after selecting option 2 the box then dissapears.

Is this possible?

Thanks

**JMRKER** · 08-03-2011 08:05 AM

Originally Posted by amean_n

Thank you for your reply,

I have got this coe to work, however I would also like it to behave in a way that when the user selects option 1 after selecting option 2 the box then dissapears.

Is this possible?

Thanks

That was not in the original request. It is possible, but it is best if you think through what you want before you ask for it.

Code:

function SBoxAction(info) { // alert(info);
  $_('option2show').style.display = 'none';

  if (info == 2) { toggle('option2show'); }
// can remove 'toggle()' function if following used instead of above
//  if (info == 2) { $_('option2show').style.display = 'block'; }

  $_('SBox').selectedIndex = 0;
}

Untested, but should be close...

Thread: Div to appear based on dropdown selection

Thread Tools

Display

Div to appear based on dropdown selection

Something to consider...

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions