title: How to hide and show div onselect using javascript
body: <p>This is the code i am trying -</p>
  
  <p>DIVS-</p>
  
  <pre><code>&lt;div id="showdiv16" style="display:none;"&gt;...&lt;/div&gt;
  &lt;div id="showdiv17" style="display:none;"&gt;...&lt;/div&gt;
  &lt;div id="showdiv18" style="display:none;"&gt;...&lt;/div&gt;
  &lt;div id="showdiv19" style="display:none;"&gt;...&lt;/div&gt;
  </code></pre>
  
  <p>Now i have a drop down menu from which i am fetching values 16,17, 18,19</p>
  
  <p>and on this drop down menu, i an calling onchange method as </p>
  
  <pre><code>&lt;select name="category" id="category" onChange="showSelected(this.value);showSubcategory();" &gt;
  </code></pre>
  
  <p>And my JavaScript function is- </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  function showSelected( sapna )
  {
  
      var myDivs = new Array(16,17,18,19); 
      for(var i=0; i&lt;myDivs.length; i++) 
      {
          if(myDivs[i] == sapna)
          {
              var divtoshow = 'showdiv'+sapna;
              document.getElementById('showdiv'+sapna).style.display = "block";
          }
          else
          {
              document.getElementById('showdiv'+myDivs[i]).style.display = "none";
          }
      }
  
      return false;
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Let me know how can i achieve this show/hide div effect.</p>