title: Changing values of a multiple select box when selecting the value of other
body: <p>I have two multiple <code>select</code> boxes and have made a function where when I change the value of the first I want to change the <code>value</code> of the second... But it is not working... Can you please help me?</p>
  
  <p>Here is the code:</p>
  
  <p>first combo:</p>
  
  <pre><code>&lt;div style="margin-left: 161px;"&gt;
  &lt;select id="media" class="chzn-done ready valid" onchange="ObterPublicacoes(this.value);" name="media" data-size="small" multiple="" style="display: none;"&gt;
  &lt;div id="media_chzn" class="chzn-container chzn-container-multi chzn-container-active" style="width:100%;"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Function:</p>
  
  <pre><code>function ObterPublicacoes(teste) {
      document.getElementById('publicacao').options.length = 0;
      document.getElementById('publicacao').innerHTML = '&lt;option value="" &gt;publicacoes&lt;/option&gt;&lt;option value="" &gt;publicacoes2&lt;/option&gt;'
  }
  </code></pre>
  
  <p>Second combo after change:</p>
  
  <pre><code>&lt;select id="publicacao" class="dualselects" name="publicacao" data-size="small" multiple="multiple" style="display: none;"&gt;
      &lt;option value=''&gt;publicacoes&lt;/option&gt;
      &lt;option value=''&gt;publicacoes2&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>you can see it changes the values but not on right side... How can I change in the right side?</p>