title: restrict child multiple select based on multiple select of parent with jquery
body: <p>I need to create an interface that upon selection of a parent multi select, it updates a child multi select of options. It is intended that the parent multi select can have none, one or many options selected and the child element displays a union of items that both parents have (or falls back to all items).</p>
  
  <p>Take for example:</p>
  
  <ul>
  <li>When parent 1 is selected, all status items for parent 1 should be allowed to be selected</li>
  <li>When parent 1 and parent 2 are selected all status items that are allowed within both parent 1 and 2 should be allowed to be selected in the child element</li>
  </ul>
  
  <p>After searching around here and doing a lot of googling I think I have got close, but this solution unfortunately does not fully satisfy the second requirement.</p>
  
  <p>I may be approaching this totally the wrong way, so I'm open to suggestions.</p>
  
  <p>The JS:    </p>
  
  <pre><code>$(document).ready(function(){
  
  var allOptions = $('#children option').clone();
  
  function children_update() {
      $('#parents &gt; option:selected').each(function() { 
          $('#children').html(allOptions.filter('.option-' + parseInt($(this).val())));    
      });
      if(!$('#parents &gt; option:selected').length) { $('#children').html(allOptions); }
  }
  
  children_update();
  
  $('#parents').change(function() { children_update(); });
  });
  </code></pre>
  
  <p>The HTML</p>
  
  <pre><code>    Parents&lt;br /&gt;
  &lt;select multiple name="parents[]" id="parents"&gt;
  &lt;option value="1"&gt;parent 1&lt;/option&gt;
  &lt;option value="2"&gt;parent 2&lt;/option&gt;
  &lt;option value="3"&gt;parent 3&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;br /&gt;
  Children&lt;br /&gt;
  &lt;select multiple name="children[]" id="children"&gt;
  &lt;option value="1" class="option-1"&gt;child 1 (1)&lt;/option&gt;
  &lt;option value="2" class="option-1 option-2"&gt;child 2 (1,2)&lt;/option&gt;
  &lt;option value="3" class="option-1 option-2 option-3"&gt;child 3 (1,2,3)&lt;/option&gt;
  &lt;option value="4" class="option-1 option-2"&gt;child 4 (1,2)&lt;/option&gt;
  &lt;option value="5" class="option-2"&gt;child 5 (2)&lt;/option&gt;
  &lt;option value="6" class="option-3"&gt;child 6 (3)&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>Thanks</p>