Selected option

[corialgates]

Hello, I am new with javascript and have been trying all day to figure out how do this problem. I am not sure to use the switch or just if function? Basically I want a drop down to give a list of all ipod nano's and based on what generation is selected I want to display the correct storage space in checkboxes under my selection. I was able to get one option to come and go but after adding more I got lost.



This is part of the html:
(I am trying to use the div tag's display to hide and populate the area once its selected)

<form action="#" method="post" enctype="multipart/form-data" name="deviceForm">
<fieldset>

<legend>Please select your device?</legend>
<p>
    <label for="nano">Nano</label>
        <select onchange="nanoIpod(this);" name="nanoIpod" class="medium">
      		<option value="nothing"></option>
	  		<option value="nano1">iPod nano</option>
	  		<option value="nano2">iPod nano 2nd generation</option>
	  		<option value="nano3">iPod nano 3rd generation</option>
            <option value="nano4">iPod nano 4th generation</option>
            <option value="nano5">iPod nano 5th generation</option>
            <option value="nano6">iPod nano 6th generation</option>
	 	</select>
<div id="nothingDiv" name="nothingDiv" style="display: none">
		<input name="1GB" type="checkbox" id="1GB" value="" />
        	<label for="1GB">1GB</label>
		<input name="2GB" type="checkbox" id="2GB" value="" />
        	<label for="2GB">2GB</label>
        <input name="4GB" type="checkbox" id="4GB" value="" />
       	<label for="4GB">4GB</label>
</div>		
<div id="nano1Div" name="nano1Div" style="display: none">
		<input name="4GB" type="checkbox" id="4GB" value="" />
        	<label for="4GB">4GB</label>
		<input name="8GB" type="checkbox" id="8GB" value="" />
        	<label for="8GB">2GB</label>
        <input name="16GB" type="checkbox" id="16GB" value="" />
       	<label for="16GB">16GB</label>
</div>		
<p> 
</code>
thanks in advance for your help



<code>
function preparepage() {
	
	
	
	
	

var ind=document.getElementById("nanoIpod").options[document.getElementById("nanoIpod").selectedIndex].value;


function nanoIpod (obj){
	if(ind=0){
		document.getElementById("nothingDiv").style.display = 'none';
						};
				
		
}
	
	
 



}

window.onload = function () {
		
	preparepage();

}

[devnull69]

You don't have any element with id="nanoIpod", yet to try to address it using getElementById('nanoIpod'). This will definitely fail. So it's time to debug :-)

1. Add an id attribute to the select (let's say "select1")
2. document.getElementById('select1').value will give you the currently selected value of the select inside your onchange handler
3. Depending on the value you can show/hide the depending div's

If you need more info, feel free to ask. Please add your updated code then.

[Kor]

<select onchange="nanoIpod(this);" name="nanoIpod" class="medium">

Your element has a name="nanoIpod", not an id, thus you can not use the method document.getElementById() unless you give it also an id. Take care, unlike the token name, the id must be unique on document.

Another thing: Don't name you functions same as other global variables or as other id or name attributes.