Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: Javascript HTML jQuery , +
I am attempting to show and hide divs based on a users drop down selection, what I want is when a user selects a sector say pubs the div pub will be displayed and the others hidden on the page.
 
The code is not working at the moment but I think its referenced correctly and cant find the issue.Any assistance would be great.
 
My divs are named like so
 
<div id="Pubs">
<div id="Councils">
<div id="Property">
<div id="Various">
 
My drop down list, HTML
<div id="Pub-Chains">
 

<pre lang="xml"><form>
              <p>
              <select id="dropdown" name="dropdown">
                  <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>
          </form>
 
JS
 
<script>
 
$('document').ready(function () {
var select = $( '#dropdown' );
 
function showTab( name ) {
  name = '#' + name;
  $( 'div' ).not( name ).hide();
  $( name ).show();
}
 
select.change( function() {
  showTab( $( this ).val() );
});
 
showTab( select.val() );
 

</script>
Posted 15-Jan-13 7:00am
Rate this: bad
good
Please Sign up or sign in to vote.

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  
Rate this: bad
good
Please Sign up or sign in to vote.

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  
v3
Rate this: bad
good
Please Sign up or sign in to vote.

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  
v2
Comments
Kiran Kumar at 24-Oct-13 2:26am
   
$('div id').not(name).hide();
 
I tried this and it worked, but the it does not hide the first called DIV.

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



Advertise | Privacy | Mobile
Web04 | 2.8.1411023.1 | Last Updated 16 Jan 2013
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100