title: How to select multiple values without ctrl key when select values are loaded dynamically as a function of another select
body: <p>I am using the 'wicket' framework in my web application. I have two selects like this:</p>
  
  <pre><code>&lt;select wicket:id="brands" onchange="applyMultiSelection ();"&gt;
   &lt;option value="volvo"&gt;Volvo&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select wicket:id="models" id="models"&gt;
   &lt;option value="A"&gt;A&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>Using wicket models, the second's values are loaded dynamically after the value in the first one has been selected. The second is a multi select (is created with wicket's ListMultipleChoice).</p>
  
  <p>In order to select several values without pressing the ctrl key, I have added to the html head the following:</p>
  
  <pre><code>&lt;script src="http://code.jquery.com/jquery-1.8.1.min.js"&gt;&lt;/script&gt;
  
  &lt;style type="text/css"&gt;
      .multi-selection {
          background-color: Highlight;
          color: HighlightText;
      }
  &lt;/style&gt;
  
      &lt;script type="text/javascript"&gt;
          // Applies multiselection on select tags
          var multiselection = function(){
              $("#models").MultiSelect({
                  css_class_selected: "multi-selection"
              });
          };
  
          function applyMultiSelection () {
              $('#models').ready( multiselection() );
          }
      &lt;/script&gt;
  </code></pre>
  
  <p>It doesn't seem to work, I have tried something similar for a multi select in static html and it allows me to select multiple values just clicking with the mouse, so I suspect I could be close to the solution. Any ideas?</p>