title: How to select values in a multiselector based on the selected values of another multiselector
body: <p>I have two multiselectors as follows, the first one using the Chosen plugin:</p>
  
  <pre><code>&lt;%= select_tag :provinces, options_for_select(DataHelper::all_provinces_captions.zip(DataHelper::all_provinces_ids)), {:multiple =&gt; true, class: 'chosen-select chzn-select', :data =&gt; {:placeholder =&gt; 'Filter Provinces/States'}, :style =&gt; "width: 100%; height: 100px;"}%&gt;
  
  &lt;%= f.select :province_ids,
    (DataHelper::all_provinces_captions.zip(DataHelper::all_provinces_ids)),
    { include_blank: true },
    {multiple: true, data: {placeholder: 'Filter Provinces/States'} }
  %&gt;
  </code></pre>
  
  <p>I want to make the selected values in the <code>:provinces</code> selector, the same as the selected value of the <code>:province_ids</code> selector, on page load. Something similar to this:</p>
  
  <pre><code>$(document).ready(function() {
    $("#education_plan_province_ids option:selected").each(function () {
      $("#provinces option[value='"this"']").prop('selected', true); 
    });
  });
  </code></pre>
  
  <p>Except, of course, that doesn't work :D</p>