title: Dropdown Menu, hide and display its value
body: <p>I have a drop down menu consisting of animals. I would like to do something like, choose an animal from the dropdown menu, for example, dog. Then it will display something on a button with a value 'bark'. After that, I would like to choose another animal for example, cat. Then it will display something on a button with a value 'meow'. What I wanna do is, after I have clicked on the dropdown menu for cat(another animal). How can I hide the value of the dog(Which is bark). Because what I did now, the value of the dog(bark) will still be displayed even after I choose the animal, cat. Thanks! Here's the code below... </p>
  
  <pre><code>&lt;body&gt;
  
      &lt;script type="text/javascript"&gt;
      var timeout = 50;
  var closetimer  = 0;
  var ddmenuitem  = 0;
  
  // open hidden layer
  function mopen(id)
  {   
      // cancel close timer
      mcancelclosetime();
  
      // close old layer
      if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
  
      // get new layer and show it
      ddmenuitem = document.getElementById(id);
      ddmenuitem.style.visibility = 'visible';
  
  }
  // close showed layer
  function mclose()
  {
      if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
  }
  
  // go close timer
  function mclosetime()
  {
      closetimer = window.setTimeout(mclose, timeout);
  }
  
  // cancel close timer
  function mcancelclosetime()
  {
      if(closetimer)
      {
          window.clearTimeout(closetimer);
          closetimer = null;
      }
  }
  
  // close layer when click-out
  document.onclick = mclose; 
      &lt;/script&gt;
  
      &lt;div id ="top1" style="position:absolute; top:1; left:80; z-index:1"&gt;
  
  &lt;ul id="sddm"&gt;
  &lt;li&gt;&lt;a href="#" 
      onmouseover="mopen('m1')" 
      onmouseout="mclosetime()"&gt;Animals&lt;/a&gt;
      &lt;div id="m1" 
          onmouseover="mcancelclosetime()" 
          onmouseout="mclosetime()"&gt;
      &lt;a href="#" onclick="$('#chkdog').show(); return false;"&gt;Dog&lt;/a&gt;
      &lt;a href="#" onclick="$('#chkcat').show(); return false;"&gt;Cat&lt;/a&gt;
  &lt;/div&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;input id="chkdog" type="button" value="Bark" style="display:none;"&gt; &lt;br&gt;
  &lt;input id="chkcat" type="button" value="Meow" style="display:none;"&gt; &lt;br&gt;
  
  
  &lt;/body&gt;
  </code></pre>