Jquery and html select tag

Does anyone have an example of how to use a select (html form tag) that when something is selected, it will show or hide a div base upon what is selected?

I don't have any examples as I'm just getting started and can't find anything when I Google.

Basically I want to control (show / hide) a div with a select form tag.

Any help would be greatly appreciated.
LVL 1
jasch2244Asked:
Who is Participating?
 
hieloConnect With a Mentor Commented:
try:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<title>Untitled Page</title>
		<style type="text/css" media="screen">
		<!--
.hiddenDiv {
	display: none;
	}
.visibleDiv {
	display: block;
	min-height:500px;
	border: 1px grey solid;
	width: 450px;
	background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(252,252,252,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(252,252,252,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(252,252,252,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(252,252,252,0) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(252,252,252,0) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00fcfcfc',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(252,252,252,0) 100%); /* W3C */
	}
-->
		</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$( function(){
	$('#selectName').bind('change',function(){
		var self=this;
		if(!$('.hiddenDiv:visible').size())
			$('#'+self.value).fadeIn('slow');
		else
			$('.hiddenDiv:visible').fadeOut('slow',function(){
				$('#'+self.value).fadeIn('slow');		
			});
	});
});
</script>
	</head>

	<body bgcolor="#ffffff">
		<form id="FormName" action="blah.php" method="get" name="FormName">
			<select name="selectName" id="selectName" size="1" >
				<option value="">Choose One...</option>
				<option value="one">first</option>
				<option value="two">second</option>
				<option value="three">third</option>
			</select>
		</form>
		<p id="one" class="hiddenDiv">This is paragraph 1.</p>
		<p id="two" class="hiddenDiv">This is paragraph 2.</p>
		<p id="three" class="hiddenDiv">This is paragraph 3.</p>		
	</body>

</html>

Open in new window

0
 
leakim971PluritechnicianCommented:
check this page : http://jsfiddle.net/JQLAx/

$("select").change(function() {
    if( $(this).val() == 0 ) {
        $(".mydiv").hide();
    }
    else if( $(this).val() == 1 ) {
        $(".mydiv").show();
    }        
})

Open in new window

<div class="mydiv">HELLO</div>
<br />
<select>
    <option value="">Select something</option>
    <option value="0">Hide Div</option>
    <option value="1">Show Div</option>
</select>

Open in new window

0
 
jasch2244Author Commented:
Ehh more like this... but I want it to animate (this is javascript version) but I need jquery to make it animate, fade etc.

Any thoughts on what I have thus far?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<title>Untitled Page</title>
		<script type="text/javascript"><!--
	var lastDiv = "";
	function showDiv(divName) {
	// hide last div
	if (lastDiv) {
		document.getElementById(lastDiv).className = "hiddenDiv";
	}
	//if value of the box is not nothing and an object with that name exists, then change the class
	if (divName && document.getElementById(divName)) {
		document.getElementById(divName).className = "visibleDiv";
		lastDiv = divName;
	}
}
//-->
</script>
		<style type="text/css" media="screen">
		<!--
.hiddenDiv {
	display: none;
	}
.visibleDiv {
	display: block;
	min-height:500px;
	border: 1px grey solid;
	width: 450px;
	background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(252,252,252,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(252,252,252,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(252,252,252,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(252,252,252,0) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(252,252,252,0) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00fcfcfc',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(252,252,252,0) 100%); /* W3C */
	}
-->
		</style>
	</head>

	<body bgcolor="#ffffff">
		<form id="FormName" action="blah.php" method="get" name="FormName">
			<select name="selectName" size="1" onchange="showDiv(this.value);">
				<option value="">Choose One...</option>
				<option value="one">first</option>
				<option value="two">second</option>
				<option value="three">third</option>
			</select>
		</form>
		<p id="one" class="hiddenDiv">This is paragraph 1.</p>
		<p id="two" class="hiddenDiv">This is paragraph 2.</p>
		<p id="three" class="hiddenDiv">This is paragraph 3.</p>		
	</body>

</html>

Open in new window

0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

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.

 
leakim971PluritechnicianCommented:
>Basically I want to control (show / hide) a div with a select form tag.

and now :

>but I need jquery to make it animate, fade etc.

0
 
jasch2244Author Commented:
Yes most certainly
0
 
jasch2244Author Commented:
Yes exactly but.. the css does not work... does it have something to do with the DOM or something?
Nice solution
0
 
hieloConnect With a Mentor Commented:
move the hiddenDiv CSS definition so that it is AFTER the visibleDiv css definition, and in your DIVs, instead of just:
class="hiddenDiv"

use:
class="visibleDiv hiddenDiv"
0
 
jasch2244Author Commented:
Interesting worked in Firefox but not IE (no suprise) I'm happy to allot the credits any idea why IE wont take the code. I've updated it below.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<title>Untitled Page</title>
		<style type="text/css" media="screen">
		<!--
.visibleDiv {
	display: block;
	min-height:500px;
	border: 1px grey solid;
	width: 450px;
	background-color:#999999

	}
.hiddenDiv {
	display: none;
	}
	-->
		</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$( function(){
	$('#selectName').bind('change',function(){
		var self=this;
		if(!$('.hiddenDiv:visible').size())
			$('#'+self.value).fadeIn('slow');
		else
			$('.hiddenDiv:visible').fadeOut('slow',function(){
				$('#'+self.value).fadeIn('slow');		
			});
	});
});
</script>
	</head>

	<body bgcolor="#ffffff">
		<form id="FormName" action="blah.php" method="get" name="FormName">
			<select name="selectName" id="selectName" size="1" >
				<option value="">Choose One...</option>
				<option value="one">first</option>
				<option value="two">second</option>
				<option value="three">third</option>
			</select>
		</form>
		<p id="one" class="visibleDiv hiddenDiv">This is paragraph 1.</p>
		<p id="two" class="visibleDiv hiddenDiv">This is paragraph 2.</p>
		<p id="three" class="visibleDiv hiddenDiv">This is paragraph 3.</p>		
	</body>

</html>

Open in new window

0
 
hieloCommented:
well, I tested my suggestion earlier on IE 6  and it worked fine (it still does).  Sometime ago I was dealing with Opacity (as opposed to Gradient), and it turns out that for newer version of IE I had to ALSO add/declare the "-ms-filter" style of definition. Look at the way it was coded here:
http://stackoverflow.com/questions/2293910/css3-transparency-gradient

I can't test it because currently I have IE 6 only.
0
 
hieloConnect With a Mentor Commented:
Refer to the following:
http://reference.sitepoint.com/css/filter

specifically the "filters in IE 8" note/section.
0
 
hieloCommented:
0
 
jasch2244Author Commented:
Awesome!!!! Thank you so much
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.