title: Based on 1st dropdown the 2nd should be visible. It works in all browsers but not in IE (all versions)
body: <p>Why is the following code not working in IE (all versions)?</p>
  
  <p>I have 2 dropdowns. The 2nd dropdown should display based on the 1st. This is working in all browsers but not in any version of IE. Please help me out. What is the mistake in this code?</p>
  
  <pre><code>   &lt;html&gt;
     &lt;style type="text/css"&gt;
      #navMenu {
      margin: 70px;
      padding: 40px;
           }
       #navMenu select {
      color: #000;
      background: #CD5C5C;
      font-size: 15px;
      font-weight: bold;
      padding: 2px 10px;
      width: 200px;
      font-family:"Calibri",cursive;
      text-align:center;
           }
     p.hiddenMenu {
      display: none;
              }
     p.visibleMenu {
      display: inline;
              }
    &lt;/style&gt;
  
         &lt;script type="text/javascript"&gt;
            var lastDiv = "";
            function showDiv(divName) 
            {
               if (lastDiv)
               {
                 document.getElementById(lastDiv).className = "hiddenMenu";
               }   
            if (divName &amp;&amp; document.getElementById(divName)) 
               {
                 document.getElementById(divName).className = "visibleMenu";
                 lastDiv = divName;
               }
             }
          &lt;/script&gt;
  
  
    &lt;body bgcolor="#87CEFA"&gt;
    &lt;div id="wrapper"&gt;
      &lt;div id="navMenu"&gt;
          &lt;select name="category" id="statename" onchange="showDiv(this.value);"&gt;
              &lt;option value="-1"&gt;&lt;b&gt;--Select State--&lt;/b&gt;&lt;/option&gt;
              &lt;option&gt;one&lt;/option&gt;
              &lt;option&gt;two&lt;/option&gt;
              &lt;option&gt;three&lt;/option&gt;
              &lt;option&gt;four&lt;/option&gt;
              &lt;option&gt;five&lt;/option&gt;
              &lt;option&gt;six&lt;/option&gt;
              &lt;option&gt;seven&lt;/option&gt;
          &lt;/select&gt;
          &lt;br class="clearFloat" /&gt;&lt;/br&gt;
  
          &lt;form id="aform"&gt;
              &lt;p id="one" class="hiddenMenu"&gt;
                  &lt;select id="mymenu" size="1"&gt;
                      &lt;option value=""&gt;--select--&lt;/option&gt;
                      &lt;option value="http://google.com"&gt;one selected&lt;/option&gt;
                      &lt;option value="http://google.com"&gt;two selected&lt;/option&gt;
                  &lt;/select&gt;
          &lt;/form&gt;
          &lt;/p&gt;
          &lt;script language="javascript"&gt;
              var selectmenu=document.getElementById("mymenu")
              selectmenu.onchange=function()
              {
                 var chosenoption=this.options[this.selectedIndex]
                 if (chosenoption.value!="nothing")
                 {
                    window.open(chosenoption.value,"_parent")
                 }
              }
          &lt;/script&gt;
  
   &lt;/div&gt;&lt;/div&gt;
   &lt;/body&gt;
   &lt;/html 
  </code></pre>