title: Toggle the three option menus based on first using Javascript
body: <p>When I click on another, the previous should not be visible.</p>
  <p>I want that if I select A, and then B, and then C, the inner HTML should show C content only. Can someone help me with how to do this?</p>
  <p>I actually need it for a jsp form where I can toggle between the options and then get parameter. I am stuck on this.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function myFunction() {
    if (document.getElementById("abcid").selectedIndex == "1") {
      document.getElementById("aid").innerHTML = "A:&lt;select&gt;" +
        "&lt;option&gt;Select-&lt;/option&gt;" +
        "&lt;option&gt;Alex&lt;/option&gt;" +
        "&lt;option&gt;Jack&lt;/option&gt;" +
        "&lt;/select&gt;";
    } else if (document.getElementById("abcid").selectedIndex == "2") {
      document.getElementById("bid").innerHTML = "B:&lt;select&gt;" +
        "&lt;option&gt;Select-&lt;/option&gt;" +
        "&lt;option&gt;US&lt;/option&gt;" +
        "&lt;option&gt;Australia&lt;/option&gt;" +
        "&lt;option&gt;India&lt;/option&gt;" +
        "&lt;/select&gt;";
    } else if (document.getElementById("abcid").selectedIndex == "3") {
      document.getElementById("cid").innerHTML = "C:&lt;select&gt;" +
        "&lt;option&gt;Select-&lt;/option&gt;" +
        "&lt;option&gt;Blue&lt;/option&gt;" +
        "&lt;option&gt;Green&lt;/option&gt;" +
        "&lt;option&gt;Red&lt;/option&gt;" +
        "&lt;/select&gt;";
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
    &lt;tr&gt;
      &lt;td&gt;ABC:
        &lt;select id="abcid" onchange="myFunction()"&gt;
          &lt;option&gt;Select-&lt;/option&gt;
          &lt;option&gt;A&lt;/option&gt;
          &lt;option&gt;B&lt;/option&gt;
          &lt;option&gt;C&lt;/option&gt;
        &lt;/select&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td id="aid"&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td id="bid"&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td id="cid"&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>