Show hide dropdown in Javascript

Hello Guys,

Again sticking to my basic idea to guiding the users who need very quick, easy and readily available help.

Lets today discuss about how to show hide a dropdown using javascript.

My aim was that I have a dropdown so whenever I select a option another text box should get enabled and disabled respectively and at the same time another dropdown should appear.

So for that I had written small piece of code as below.:
<!--


    <td class="textField" width="30%" align="left" valign="middle" scope="col" >SWF# Available*</td>
    <td class="textField" width="30%" align="left" valign="middle" scope="col" >
   <!-- <input type="radio" name="swfselect" id="swfselect1" value="yes"
onClick="testbutton();"/>
Yes
<input type="radio" name="swfselect" id="swfselect2" value="no"
onClick="testbutton();"/>
No     -->

<select name="swfselect1" id="swfselect1" onchange="testbutton();">
<option value="" selected>Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>

   
   
 
 
  </tr>
   <tr>
    <td class="textField" width="30%" align="left" valign="middle" scope="col"> SWF Number*</td>
    <td class="textField" width="20%" align="left" valign="middle" scope="col">SWF<input disabled=disabled onblur="email_chk(2);" type="text" size="5" name="swfNo" id="swfNo" maxlength="5"/></td>
    <td class="textField" width="30%" align="left" valign="middle" scope="col" >SWF Details*</td>
     <td class="textField" width="30%" align="left" valign="middle" scope="col" >
  <table cellpadding="0" border="0" width="100%">
  <tr>
 
  <td class="textField" border="0" cellpadding="0">
<select name="gatestatus" id="gatestatus" >
<option value="" selected>Gate Status*</option>
<option value="Planned">Planned</option>
<option value="ready for approval">ready for approval</option>
<option value="Cancelled by customer">Cancelled by customer</option>
<option value="Closed">Closed</option>
<option value="approved">approved</option>
</select>
</td>
   <td class="textField" border="0" cellpadding="0">
  <select name="reasons" id="reasons" style="display:none" >
<option value="" selected>Current Gate*</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>

<select name="reasons2" id="reasons2" style="display:none" >
<option value="" selected>Current Gate*</option>
<option value="Not Available">Not Available</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
   </td>
 
       </td>
       </tr>
       </table>
         
</td>



-->


As seen above a function is getting triggered whenever a option is selected i:e either Yes or No. The function is as follows

<script language="javascript" type="text/javascript">
function testbutton()
{




if(document.getElementById("swfselect1").value=="Yes")
        {
        document.getElementById("swfNo").disabled=false;
        document.getElementById("swfNo").value="";
        document.getElementById("reasons2").style.display='none';
        document.getElementById("reasons").style.display='block';
       
        }
    if(document.getElementById("swfselect1").value=="No")
        {
        document.getElementById("swfNo").disabled=true;
        document.getElementById("swfNo").value='Awaited';
       document.getElementById("reasons2").style.display='block';
        document.getElementById("reasons").style.display='none';
        }
return false;   
}
</script>






Small piece of Code but interesting to apply.

Let me know if you guys have any comments or opinions.