[Solved] Want to Show and Hide Divs based on drop down selection not working?

Posted 15 Jan '13 - 6:00

Solution 2

It seems you have not closed the $('document').ready function properly with the }); like you're supposed to, and it works fine for me if you reference the drop down directly instead of using the 'select' variable.

Code in full:

<html>
 
<head>
 
	<title>Drop Down Example</title>
 
	<script type="text/javascript" src="jquery-1.8.3.min.js"></script> 
 
	<script>
		$(document).ready(function () {
 
			function showTab( name ) 
			{
  				name = '#' + name;

  				$('div').not(name).hide();

  				$(name).show();
			}
 
			$('#dropdown').change( function() {

  				showTab( $( this ).val() );
			});
 
			showTab( $('#dropdown').val() );
 
		});  // this line was missing 
	</script>
 
</head>
 
<body>
 
	<form>
              <p>
              <select id="dropdown" name="dropdown">
                  <option value="Pubs" selected="selected">Pubs </option>
                  <option value="Councils">Councils </option>
                  <option value="Property">Property </option>
                  <option value="Various">Various </option>
                  <option value="Universitys">Universitys </option>
              </select>
              </p>
         </form>
 

	<div id="Pubs">pubs</div>
	<div id="Councils">councils</div>
	<div id="Property">property</div>
	<div id="Various">various</div>
	<div id="Universitys">universitys</div>
 

</body>
 
</html>

Permalink

Posted 15 Jan '13 - 7:57

Nick Fisher (Consultant)1.6K

Edited 15 Jan '13 - 8:02

Solution 1

Not too sure if the event was properly bind. It might be, showTab( select.val() ); happens once at the start/load of the page and then never occurs again. Debugging would have made it clear.

Since you want this behaviour on every selection option change, you can try in other way to verify.
Something like following should do:

           <form>
              <p>
              <select id="dropdown" name="dropdown" onchange="showTab();">
                  <option value="Pub-Chains" selected="selected"> Pub Chains </option>
                  <option value="Councils">Councils </option>
                  <option value="Property">Property </option>
                  <option value="Various">Various </option>
                  <option value="Universitys">Universitys </option>
              </select>
              </p>
 
              <div id="Pubs-Chains">
              <div id="Councils">
              <div id="Property">
              <div id="Various">
          </form>

JS:

<script>
 
function showTab( ) {
  var select = $( '#dropdown' );
  $( 'div' ).not( select.val()).hide();
  $( name ).show();
}
 
</script>

Permalink

Posted 15 Jan '13 - 7:07

Sandeep Mewara473K

Solution 4

One question though youre code works on a standalone web page, but on my web page I have many Divs and the piece of code

$('div').not(name).hide();

Hides all the divs on the page and nothing is displayed.Is there a way of changing this?.

Permalink

Posted 16 Jan '13 - 0:07

Ben Matheson123

Edited 16 Jan '13 - 0:09

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

0	OriginalGriff	325
1	Abhinav S	168
2	Sergey Alexandrovich Kryukov	150
3	Ron Beyer	100
4	Zoltán Zörgő	85

0	Sergey Alexandrovich Kryukov	8,386
1	OriginalGriff	6,596
2	CPallini	3,533
3	Rohan Leuva	2,703
4	Maciej Los	2,234

Want to Show and Hide Divs based on drop down selection not working?

3 solutions

Solution 2

Solution 1

Solution 4

Add your solution here

Preview 0

		9,880,516 members (38,991 online) Visit CodeProject.TV Discuss CodeProject.TV Sign in Email Password Forgot your password? Sign in using

Interested
Ignored

Want to Show and Hide Divs based on drop down selection not working?

3 solutions

Solution 2

Solution 1

Solution 4

Add your solution here

Preview 0

Existing Members

...or Join us