Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Show/Hide div based on select option value

Posted on 2009-05-13
3
Medium Priority
?
4,441 Views
Last Modified: 2012-05-06
I have a select list with values that are tied to corresponding divs. The idea is to select the option from the list and show that corresponding div which is currently hidden. If another option is selected the current one is hidden and the new one is shown. Currently i have it setup to toggle the div which in a way works fine, but i would like only one div to show at a time no matter what depending on the selected item. I would prefer to do this using jQuery. The code is attached...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jQuery1.3.js"></script>
<script type="text/javascript">
 
$(document).ready(function(){
 
	$("#theSelect").change(function(){			
		$("#theSelect option:selected").click(function(){
			var value = $(this).val();
			var theDiv = $(".is" + value);
 
			$(theDiv).toggle(function(){
				$(this).removeClass("hidden");
			}),function(){
				$(this).addClass("hidden");
			}
		});	
	});
 
});
 
</script>
<style type="text/css">
.hidden {
	display: none;
}
</style>
</head>
 
<body>
	<div class="selectContainer">
		<select id="theSelect">
			<option value="">- Select -</option>
			<option value="Patient">Patient</option>
			<option value="Physician">Physician</option>
			<option value="Nurse">Nurse</option>
		</select>
	</div>
	<div class="hidden isPatient">Patient</div>
	<div class="hidden isPhysician">Physician</div>
	<div class="hidden isNurse">Nurse</div>
</body>
</html>

Open in new window

selectDiv.txt
0
Comment
Question by:LiquorKraZy
3 Comments
 
LVL 12

Assisted Solution

by:alien109
alien109 earned 200 total points
ID: 24377410
try this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jQuery1.3.js"></script>
<script type="text/javascript">
 
$(document).ready(function(){
		$(".divContainer div").hide();
        $("#theSelect").change(function(){
			var value = $(this).val();
			var theDiv = $(".is" + value);
			$(theDiv).show(300);
			var selector = ".divContainer div[class!=.is" + value + "]";
			console.log(selector);
			$(".divContainer div[class!=is" + value + "]").hide(300);
        });
 
});
 
</script>
 
</head>
 
<body>
        <div class="selectContainer">
                <select id="theSelect">
                        <option value="">- Select -</option>
                        <option value="Patient">Patient</option>
                        <option value="Physician">Physician</option>
                        <option value="Nurse">Nurse</option>
                </select>
        </div>
        <div class="divContainer">
			<div class="isPatient">Patient</div>
			<div class="isPhysician">Physician</div>
			<div class="isNurse">Nurse</div>
        </div>
</body>

Open in new window

0
 

Accepted Solution

by:
LiquorKraZy earned 0 total points
ID: 24377536
That works Great! thank you...
0
 

Expert Comment

by:e-wiZz
ID: 25110735
dont use hidden or similar,use .show(),.hide() its simple and it works even if div is hidden already
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

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
This article discusses how to implement server side field validation and display customized error messages to the client.
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…
Suggested Courses
Course of the Month12 days, 17 hours left to enroll

971 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