Dynamic drop down list

[Angelojoseph17]

I have a drop down box  with two options depending on the option chosen it will open up another text box or a drop down box. Below is my function in ajax and also the php code. It partially works. But when i choose the value byreturn it shows both. Also on load it shows both which is annoying. I would appreciate it if anyone has a look. Thank you:

 

Ajax

 

 

function showfield(name){
if(name=='byreturn')document.getElementById('div1').style.display="block";
else document.getElementById('div1').style.display="none";

  if(name=='forwardorder')document.getElementById('div2').style.display="block";
  else document.getElementById('div2').style.display="none";

}

 

 

 

 

Php on the page

 

 

$content .=" 
				<tr><td> 
			    Choose Delivery Type </td>
                   <td> <select name = 'elementtype1'id='elementtype1' onchange='showfield(this.options[this.selectedIndex].value)'>
						<option value='forwardorder'>Forward Order</option>
  						    <option value='byreturn'>By Return</option>
					    </select></td>
						<td>

						<div id='div1'>Enter By Return Date<input type='text''name='whatever1' />
						</div>



						<div id='div2'>  
						<td> Forward Order Delivery </td> 
						<td><select 'name'='whatever2'/>"; 
					    $listCapacityDates = $cid->ListCapacity();
						//echo $listCapacityDates; 
						foreach($listCapacityDates as $x) {
                            $content .= "<option value='".$x."'>".$x."</option> </div>";
					    }

 

 

 

 

[MarPlo]

Hi,

On page load , the script should close /hide the second list, wth:

document.getElementById('div2').style.display="none";

Or, if you want, here is another script for dynamic drop down list Multiple Select Dropdown List made with JavaScript , which can be used for what you need.