title: Two HTML-select boxes linked to each other
body: <p>Hellloooooo...
  I have two <code>&lt;select&gt;</code> inputs like this</p>
  
  <pre><code>&lt;select id="sel1"&gt;
    &lt;option value="a"&gt;a&lt;/option&gt;
    &lt;option value="b"&gt;b&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select id="sel2"&gt;
    //if 'a' is selected above,
    //&lt;option&gt;apple&lt;/option&gt;, &lt;option&gt;airplane&lt;/option&gt;
    //if 'b' is selected above,
    //&lt;option&gt;banana&lt;/option&gt;, &lt;option&gt;book&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>And I want to list different sets of options according to the selection in <code>sel1</code>.
  I could get the selected value using onchange attribute like this:</p>
  
  <pre><code>&lt;select id="sel1" onchange="giveSelection(this)"&gt;
  &lt;script type="text/javascript"&gt;
    function giveSelection(sel) {
      var selected = sel.value;
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>But I can't come up with a way to use this value to output different select options in <code>sel2</code>.
  Help please!</p>