Show/Hide Div with Select statement

[The.Pr0fess0r]

Hello everyone, I am ready to pull my eyes out on this one.

 

I am trying to show/hide different areas of my page using div tags and javascript.

 

Here is the javascript file I am using:

 

/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Jay Rumsey | http://www.nova.edu/~rumsey/ */
function ShowReg(op) {
  document.getElementById('Whitetail Deer').style.display='none';
  document.getElementById('Turkey').style.display='none';
  document.getElementById('Ringneck Pheasant').style.display='none';

  if (op == 1) {
    document.getElementById('Whitetail Deer').style.display="block";
  }
  if (op == 2) {
    document.getElementById('Turkey').style.display="block";
  }
  if (op == 3) {
    document.getElementById('Ringneck Pheasant').style.display="block";
  }
}

 

Here is the section of my code where the div tags are:

				<tr>
				<td>
					<li class="mainForm" id="fieldBox_4">
					<label class="formFieldQuestion">Species *</label>
				</td>
				<td>
					<select id="species" name="species" onChange="ShowReg(this.selectedIndex)">
						<option selected> </option>
						<option value="Whitetail_Deer"> Whitetail Deer </option>
						<option value="Turkey"> Turkey </option>
						<option value="Ringneck Pheasant"> Pheasant </option>
					</select></li>
				</td>
			</tr>
		</table>
		<table>
			<tr>
				<td colspan="4"><br><u><b><font size="2">Animal Information      </font></b></u></td>
			</tr>
			<tr>
				<td>
					<li class="mainForm" id="fieldBox_5">
					<label class="formFieldQuestion">Sex</label>
				</td>
				<td>						
					<select class=mainForm name=sex id=sex><option value=''></option><option value="Male">Male</option><option value="Female">Female</option></select></li>
				</td>
			</tr>
			<tr>
				<td>
					<li class="mainForm" id="fieldBox_6">
					<label class="formFieldQuestion">Weight</label>
				</td>
				<td>						
					<input class=mainForm type=text name=weight id=weight size='10' value=''></li>
				</td>
				<td>
					<li class="mainForm" id="fieldBox_7">
					<label class="formFieldQuestion">Age</label>
				</td>
				<td>						
					<input class=mainForm type=text name=age id=age size='10' value=''></li>
				</td>
			</tr>
			<tr>
				<td>
					<li class="mainForm" id="fieldBox_8">
					<label class="formFieldQuestion">Weapon</label>
				</td>
				<td>						
					<input class=mainForm type=text name=weapon id=weapon size='20' value=''></li>
				</td>
				<td>
					<li class="mainForm" id="fieldBox_9">
					<label class="formFieldQuestion">Distance</label>
				</td>
				<td>						
					<input class=mainForm type=text name=distance id=distance size='20' value=''></li>
				</td>
			</tr>
	<div id="Whitetail Deer" style="display:none">
			<tr>
				<td>
					<li class="mainForm" id="fieldBox_10">
					<label class="formFieldQuestion">Total Points</label>
				</td>
				<td>						
					<input class=mainForm type=text name=total_points id=total_points size='20' value=''></li>
				</td>
				<td>
					<li class="mainForm" id="fieldBox_11">
					<label class="formFieldQuestion">Type</label>
				</td>
				<td>						
					<select class=mainForm name=type id=type><option value=''></option><option value="Typical">Typical</option><option value="NonTypical">NonTypical</option></select></li>
				</td>
			</tr>
			<tr>
				<td>
					<li class="mainForm" id="fieldBox_12">
					<label class="formFieldQuestion">Net Score</label>
				</td>
				<td>						
					<input class=mainForm type=text name=net_score id=net_score size='20' value=''></li>
				</td>
				<td>
					<li class="mainForm" id="fieldBox_13">
					<label class="formFieldQuestion">Gross Score</label>
				</td>
				<td>
					<input class=mainForm type=text name=gross_score id=gross_score size='20' value=''></li>					
				</td>
			</tr>
	</div>
		</table>
		<table>
			<tr>
				<td>
					<li class="mainForm" id="fieldBox_14">
					<label class="formFieldQuestion">Misc Comments/Story <a class=info href=#><img src=imgs/tip_small.png border=0><span class=infobox>Enter your story here.</span></a></label>
				</td>
				<td>
					<textarea class=mainForm  name=comments1 id=comments1 rows=20 cols=20></textarea></li>					
				</td>
			</tr>
		</table>
		<table>
			<tr>
				<td colspan="4"><br><u><b><font size="2">Bird Information   </font></b></u></td>
			</tr>
			<tr>
				<td>
					<li class="mainForm" id="fieldBox_15">
					<label class="formFieldQuestion">Band #</label>
				</td>
				<td>						
					<input class=mainForm type=text name=band id=band size='20' value=''></li>
				</td>
			</tr>
	<div id="Ringneck Pheasant" style="display:none">
			<tr>
				<td>
					<li class="mainForm" id="fieldBox_16">
					<label class="formFieldQuestion"># of Bars</label>
				</td>
				<td>						
					<input class=mainForm type=text name=bars id=bars size='20' value=''></li>
				</td>
			</tr>
	</div>
	<div id="Turkey" style="display:none">
			<tr>
				<td>
					<li class="mainForm" id="fieldBox_17">
					<label class="formFieldQuestion">Length of Beard</label>
				</td>
				<td>						
					<input class=mainForm type=text name=beard_length id=beard_length size='20' value=''></li>
				</td>
				<td>
					<li class="mainForm" id="fieldBox_18">
					<label class="formFieldQuestion">Length of Spurs</label>
				</td>
				<td>						
					<input class=mainForm type=text name=spur_length id=spur_length size='20' value=''></li>
				</td>
			</tr>
	</div>

 

From everything I have been reading over the last couple of days it should work...but it doesn't. When I load the page all divs are shown and nothing happens when I select a different option in my drop down box.

 

I think I need a new set of eyes. If anyone can help me it would be GREATLY appreciated!

 

Thanks!

[Zane]

 

function toggleDivDisplay(theID) {
     (document.getElementById(theID).style.display == "none") ? (document.getElementById(theID).style.display = "block") : document.getElementById(theID).style.display = "none";
}

 

and then with the divs

 

Some Random Div


With Whitetail Deer ringing the necks of turkeys and pheasants

 

 

The only problem with an onclick toggle...show/hide is that when they're on display none..you can't click them....I guess I should read your code before I posted..

[Zane]

you don't have any elements with the id's of Whitetail Deer or Pheasants or any animals...but you do have some options in the select box...it looks like your trying to hide them onchange somehow..

 

not sure how..still confused on that part

[The.Pr0fess0r]

I'm sorry, i'm not sure what you are saying in either of those posts.

 

Here is what I am trying to do...

 

Question 1

Question 2

Dropdown 1 (by default Dropdown 1 is blank and all div's on the page are hidden)

  - Option 1 (Show only the div with an id of Option 1 -- hide all others)

  - Option 2 (Show only the div with an id of Option 2 -- hide all others)

 

Question 3

Question 4

 

<div id="Option 1">

<table><tr><td>

This is option 1 (i.e. more questions inside of tables/rows/columns)

</td></tr></table>

</div>

 

Question 5

Question 6

 

<div id="Option 2>

<table><tr><td>

This is option 2 (i.e. more questions inside of tables/rows/columns)

</td></tr></table>

</div>

 

Question 7

etc.

 

 

That is the general layout of my page.

 

I have a form that needs to be filled out. The forth question is a dropdown box (with a default selected value of null). On page load I want all div's to be hidden. Once a value is selected in the dropdown box I want the appropriate div or divs to show, but all others stay hidden.

 

Does that explain things any better?

 

PS - in my first post about half way down the code box is this statement:

<div id="Whitetail Deer" style="display:none">

. Is that what you are talking about when you say

you don't have any elements with the id's of Whitetail Deer or Pheasants or any animals

[mikesta707]

well for one this is the wrong forum

 

but if you want those elements to be hidden by default, you must hide them when the page loads, IE make a function that hides everything, and then in the body tag, for the onload attribute, call that function.

[emehrkay]

i didnt test this, but somehting like this should be made a sticky

 

window.onload = function(){
    //collect your elements
    var div1 = document.getElementById('div_1_id'),
    div2 = document.getElementById('div_2_id'),
    select1 = document.getElementById('select_1'),
    select2 = document.getElementById('select_2');
    
    //store your elements in an object for easy reference later
    var element_collection = {
        1: div1,
        2: div2
    }

    //write simple show/hide function
    //same code as zanus' except the getElementBYId function isnt called twice each time it is run
    function showHideElement(show_element){
        for(var i in element_collection){
            var show = i == show_element ? 'block' : 'none';
            
            element_collection[i].style.display = show;
        }
    
        return true; //hey
    }
    
    //add events to all of your elements. im doing this the old school way
    select1.onChange = function(){
        var value = this.value;
        
        showHideElement(value); //ta-da very easy
        
    };
};