title: HTML select box, how do I move/copy selected options from one <select> to another
body: <p>I can't make this little script work: <a href="http://jsfiddle.net/NpTzR/" rel="nofollow">Fiddle</a></p>
  
  <p>I want to pass selected options from a Multiple Select to another using buttons.
  I think there is a problem with jQuery selector when trying to select all "<code>option:selected</code>".</p>
  
  <p>HTML : </p>
  
  <pre><code>&lt;div&gt;
      &lt;select id='canselect_code' name='canselect_code' multiple&gt;
          &lt;option value='1'&gt;toto&lt;/option&gt;
          &lt;option value='2'&gt;titi&lt;/option&gt;
      &lt;/select&gt;
      &lt;input type='button' id='btnRight_code' value='  &gt;  ' /&gt;
      &lt;br&gt;
      &lt;input type='button' id='btnLeft_code' value='  &lt;  ' /&gt;
      &lt;select id='isselect_code' name='isselect_code' multiple&gt;
          &lt;option value='3'&gt;tata&lt;/option&gt;
          &lt;option value='4'&gt;tutu&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$('[id^=\"btnRight\"]').click(function (e) {
  
      var selectedOpts = $(this).prev('select option:selected');
  
      if (selectedOpts.length === 0) {
          alert('Nothing to move.');
          e.preventDefault();
      } else {
          $(this).next('select').append($(selectedOpts).clone());
          $(selectedOpts).remove();
      }
  
  });
  
  $('[id^=\"btnLeft\"]').click(function (e) {
  
      var selectedOpts = $(this).next('select option:selected');
  
      if (selectedOpts.length === 0) {
          alert('Nothing to move.');
          e.preventDefault();
      } else {
          $(this).prev('select').append($(selectedOpts).clone());
          $(selectedOpts).remove();
      }
  
  });
  </code></pre>
  
  <p>The "_code" mention is in my app a dynamic code, that's why i use <code>[^selector]</code>
   instead direct id selectors like <code>(#)</code>.</p>