asked on

Show/Hide div based on select option value

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

SOLUTION