title: Display a text box when an option is selected
body: <p>I used a radio button to display the dropdown list with three options.  I need to display a textbox when the user selects the blank option.  If anyone has a suggestion that would steer me in the right direction, I would be grateful.  </p>
  
  <pre><code> &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
  &lt;title&gt;test&lt;/title&gt;
  &lt;style type="text/css" media="screen"&gt;
  .hide{
  display:none;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;form name="frm1" method="POST" action=""&gt;
  &lt;p&gt;Select type of exception:&lt;br /&gt;
  &lt;div id="tabs"&gt;
  &lt;div id="nav"&gt;
  Waiver:&lt;input type="radio" name="tab" value="pickfrom" class="div5" /&gt;
  
  &lt;/div&gt;
  
  &lt;div id="div5" class="tab"&gt;&lt;br /&gt;
  &lt;label&gt;Reason for Waiver&lt;/label&gt;
  &lt;select name="selWaiver" id="waivers" onchange="if(this.selected index==blank){this.form['box'].style.visibility='visible'}else{this.form['box'].style.visibility='hidden'};"&gt;
  
  &lt;option value="reason"&gt;Reason&lt;/option&gt;
  &lt;option value="newReason"&gt;New Reason&lt;/option&gt;
  &lt;option value="blank"&gt;Blank&lt;/option&gt;
  &lt;/select&gt;
  
  
  
  &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;script type="text/javascript" charset="utf-8"&gt;
  (function(){
  var tabs =document.getElementById('tabs');
  var nav = tabs.getElementsByTagName('input');
  /*
  * Hide all tabs
  */
  function hideTabs(){
  var tab = tabs.getElementsByTagName('div');
  for(var i=0;i&lt;=nav.length;i++){
  if(tab[i].className == 'tab'){
  tab[i].className = tab[i].className + ' hide';
  } }
  }
  /*
  * Show the clicked tab
  */
  function showTab(tab){
  document.getElementById(tab).className = 'tab'
  }
  hideTabs(); /* hide tabs on load */
  /*
  * Add click events
  */
  for(var i=0;i&lt;nav.length;i++){
  nav[i].onclick = function(){
  hideTabs();
  showTab(this.className);
  }
  }
  })();
  &lt;/script&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>