• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 4475
  • Last Modified:

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
0
LiquorKraZy
Asked:
LiquorKraZy
2 Solutions
 
alien109Commented:
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
 
LiquorKraZyAuthor Commented:
That works Great! thank you...
0
 
e-wiZzCommented:
dont use hidden or similar,use .show(),.hide() its simple and it works even if div is hidden already
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.

Join & Write a Comment

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now