title: select all options in html select dynamically
body: <p>I have two HTML selects in a form. The first is called <code>available</code> and contains several options:</p>
  
  <pre><code>&lt;select name="sortedby" multiple="multiple"&gt;
      &lt;option value="start"&gt;
          &lt;xsl:if test="@sortedby='start'"&gt;
              &lt;xsl:attribute name="selected"&gt;true&lt;/xsl:attribute&gt;
          &lt;/xsl:if&gt;
          Start time
      &lt;/option&gt;
  
      &lt;option value="thread_id"&gt;
          &lt;xsl:if test="@sortedby='thread_id'"&gt;
              &lt;xsl:attribute name="selected"&gt;true&lt;/xsl:attribute&gt;
          &lt;/xsl:if&gt;
          Thread Id
      &lt;/option&gt;
  
      &lt;option value="user_name"&gt;
          &lt;xsl:if test="@sortedby='user_name'"&gt;
              &lt;xsl:attribute name="selected"&gt;true&lt;/xsl:attribute&gt;
          &lt;/xsl:if&gt;
          Username
      &lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>The second is called <code>yourselection</code> and is empty at the beginning:</p>
  
  <pre><code>&lt;select name="sortedby_target" multiple="multiple"&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>There is a button which removes the selected options from <code>available</code> and moves them to <code>yourselection</code>.</p>
  
  <p>This button calls a JavaScript function from a library that I can use but can't modify.</p>
  
  <p>Basically it works fine. But there is a minor inconvenience: When the user moves one or several option(s) from <code>available</code> to <code>yourselection</code>, they are not selected by default "upon arrival". So currently the user has to select an option first in <code>available</code> than move it to <code>yourselection</code>, and again manually select it in <code>yourselection</code>, and then submit the form. </p>
  
  <p>What I want is everything that arrives to <code>yourselection</code> should be marked as selected by default. Any ideas?</p>
  
  <p><strong>UPDATE!</strong> I have a function that can select all elements:</p>
  
  <pre><code>function selectAllOptions(obj) {
      if (!hasOptions(obj)) { return; }
      for (var i = 0; i &lt; obj.options.length; i++) {
          obj.options[i].selected = true;
      }
  }
  </code></pre>
  
  <p>But the question is how to call it? I do not want to add another button for that reason.</p>
  
  <p>There should be something like <code>onfill</code> or something similar in select.</p>