Solved

Show/Hide div based on select option value

Posted on 2009-05-13
3
4,403 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 50 total points
Comment Utility
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
Comment Utility
That works Great! thank you...
0
 

Expert Comment

by:e-wiZz
Comment Utility
dont use hidden or similar,use .show(),.hide() its simple and it works even if div is hidden already
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

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…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
The viewer will learn how to dynamically set the form action using jQuery.
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…

771 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now