title: HTML Selection script between two droplists
body: <p>I have two droplist in html built using  tag.</p>
  
  <pre><code>&lt;select name="List1" id="List1" onclick="GetVal()"&gt;
  &lt;option value="1" selected="selected"&gt;Mercurio&lt;/option&gt;
  &lt;option value="2"&gt;Venus&lt;/option&gt;
  &lt;option value="3"&gt;Tierra&lt;/option&gt;
  &lt;option value="4"&gt;Marte&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select name="List2" id="List2"&gt;
  &lt;option value="1" selected="selected"&gt;Hg&lt;/option&gt;
  &lt;option value="2"&gt;Ve&lt;/option&gt;
  &lt;option value="3"&gt;Ti&lt;/option&gt;
  &lt;option value="4"&gt;Ma&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>I have written a script such as the selection of an element from List2 relies on the selection of the corresponding element of List1.</p>
  
  <pre><code>    &lt;script language="javascript" type="text/javascript"&gt;
  // &lt;!CDATA[
  function GetVal() {
  var LSelect1 = document.getElementById('List1');
  var LSelect2 = document.getElementById('List2');
  switch (LSelect1.selectedIndex)
  {
  case 1:
    LSelect2.selectedIndex = 1;
    break;
  case 2:
    LSelect2.selectedIndex = 2;
    break;
  case 3:
    LSelect2.selectedIndex = 3;
    break;
  default:
    LSelect2.selectedIndex = 4;
  }
  }
  // ]]&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>However, the function works wrongly for the first element of the List1. Why?</p>