Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Show/Hide div based on select option value

Posted on 2009-05-13
3
Medium Priority
?
4,434 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

New benefit for Premium Members - Upgrade now!

Ready to get started with anonymous questions today? It's easy! Learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I have answered several questions lately that were solved utilizing the power of jQuery's AJAX functions, so I thought I would write an article demonstrating the ease of use. Why should I use jQuery as opposed to regular JavaScript? Now I know…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn how to dynamically set the form action using jQuery.
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)

715 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