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

Question

1.00/5 (1 vote)

See more:

, +

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

HTML

<div id="Pubs">
<div id="Councils">
<div id="Property">
<div id="Various">

My drop down list, HTML

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

XML

<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 6:00am

Ben Matheson

Add a Solution

3 solutions

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:

XML

 <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:

XML

<script>

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

</script>

Posted 15-Jan-13 7:07am

Sandeep Mewara

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

JavaScript

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

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

Posted 16-Jan-13 0:07am

Ben Matheson

Updated 16-Jan-13 0:09am

v2

Comments

Kiran Kumar 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.

Add a Solution

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

Nick Fisher (Consultant) · Accepted Answer · 2013-01-15T07:57:00

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

<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>

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

3 solutions

Solution 1

Solution 2

Solution 4

Add your solution here

Preview 0

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

3 solutions

Solution 1

Solution 2

Solution 4

Add your solution here

Preview 0

Existing Members

...or Join us