title: select2 - limiting selection of one list based on value of another
body: <p>How do I do what this fiddle does in select2 (<a href="http://ivaynberg.github.io/select2/" rel="nofollow">http://ivaynberg.github.io/select2/</a>)</p>
  
  <p><a href="http://jsfiddle.net/Q6h5s/" rel="nofollow">http://jsfiddle.net/Q6h5s/</a></p>
  
  <p>html:</p>
  
  <pre><code>&lt;select id="sel1"&gt;
  &lt;option value="1"&gt;Fruit&lt;/option&gt;
  &lt;option value="2"&gt;Animal&lt;/option&gt;
  &lt;option value="3"&gt;Bird&lt;/option&gt;
  &lt;option value="4"&gt;Car&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select id="sel2"&gt;
  &lt;option data-val="1"&gt;Banana&lt;/option&gt;
  &lt;option data-val="1"&gt;Apple&lt;/option&gt;
  &lt;option data-val="1"&gt;Orange&lt;/option&gt;
  &lt;option data-val="2"&gt;Wolf&lt;/option&gt;
  &lt;option data-val="2"&gt;Fox&lt;/option&gt;
  &lt;option data-val="2"&gt;Bear&lt;/option&gt;
  &lt;option data-val="3"&gt;Eagle&lt;/option&gt;
  &lt;option data-val="3"&gt;Hawk&lt;/option&gt;
  &lt;option data-val="4"&gt;BWM&lt;option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>js:</p>
  
  <pre><code>$("#sel1").change(function() { 
  if($(this).data('options') == undefined){
      $(this).data('options',$('#sel2 option').clone());
      } 
  var id = $(this).val();
  var options = $(this).data('options').filter('[data-val=' + id + ']');
  $('#sel2').html(options);
  });
  </code></pre>
  
  <p>is it possible with built in functionality, or do I need to hook into </p>
  
  <p>also, is it possible to select the right sel1 after a sel2 has been chosen?</p>