showing and hiding something based on selection made

middletree · Jan 13, 2005

I had this going yesterday, but it seems to be forgotten because it's
so far down the list now.

www.middletree.net/dropdown.htm This is from an Intranet app I have
going in ASP. I have no actual URL to show you, but this should work.

Find the <select> dropdown called Type of Ticket. Now find the one
called Environment. The boss wants a couple of things to be hidden from
the user unless both of the following two conditions are met:

1. "Problem" is selected on Type of Ticket.
2. "Production" is selected on Environment.

The part of the page that you'll want to key in on is the function
called displayRadios.

In the case of the page I am posting, please note that it's a page for
editing an existing ticket, so it happens to have Production and
Problem pre-selected. On other versions of this same page, other things
might be pre-selected.

Anyway, when this page, loads, it doesn't show the parts that I am
hoping will show. No JS error is present on load. However, when you try
and change either of the dropdowns, the JS function is fired off, and
that throws the error.

Any help appreciated.

FunGuySF · Jan 14, 2005

Not sure I fully understand, but this should be close:

I'm not sure what you want to show or hide from the user. I'll assume it's
in a <div id="secretstuff"> or <span id="secretstuff">

something like this maybe?

<html>
<head>
<title>Show/Hide Demo</title>
<script type="text/javascript">
function showhide() {
var typeofticket =
document.getElementById("typeofticket").selectedIndex;
var environment =
document.getElementById("environment").selectedIndex;
if (typeofticket == 1 && environment == 1) {
document.getElementById("secretstuff").style.display = "inline";
} else {
document.getElementById("secretstuff").style.display = "none";
}
}
</script>
</head>
<body>
<form>
<p><select size="1" name="typeofticket" onchange="showhide();">
<option>Choice 1</option>
<option>Problem</option>
</select><select size="1" name="environment" onchange="showhide();">
<option>Choice 1</option>
<option>Production</option>
</select></p>
</form>
<div id="secretstuff" style="display:none">Secret Stuff is here!</div>
</body>
</html>

RobG · Jan 14, 2005

FunGuySF wrote:
[...]

document.getElementById("secretstuff").style.display = "inline";

Better to use:

...display = "";

then the default will be used (inline, block, whatever) and you don't
accidentally set it to the wrong one.

Please don't top-post and remove any unnecessary quoted text from the
reply (see the group FAQ at:

<URL:http://www.jibbering.com/faq/>

FunGuySF · Jan 14, 2005

RobG said:
[...]
Please don't top-post and remove any unnecessary quoted text from the
reply

My apologies

Mike

middletree · Jan 14, 2005

Thanks for your help. I have it now.
And for the record, I am pro-top-posting.

Filter table rows based on multiple checkboxes value	2	Jan 13, 2023
showing something based on two dropdowns	0	Jan 12, 2005
Generate one HTML from API based on the object key language and their value	2	Aug 19, 2022
Hiding tablerow based on radiobuttonlist selection	0	Apr 9, 2009
Array to select/deselect based on boolean conditions	0	Apr 1, 2019
Showing/Hiding <tr> s	2	Aug 23, 2005
Help with Javascript on my wordpress page	1	Aug 31, 2023
Showing and Hiding DIVs in FireFox	5	Oct 11, 2005

showing and hiding something based on selection made

middletree

FunGuySF

RobG

FunGuySF

middletree

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads