title: How to transfer listbox value to another listbox using jquery
body: <p>i want to transfer the selected value from listbox 1 to listbox 2 viceversa using jquery
  I have sample code below but it is not working. </p>
  
  <p>Hi guys please, i want to transfer the selected value from listbox 1 to listbox 2 viceversa using jquery
  I have sample code below but it is not working. </p>
  
  <p>Hi guys please, i want to transfer the selected value from listbox 1 to listbox 2 viceversa using jquery
  I have sample code below but it is not working. </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
      &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Listbox.js Demo&lt;/title&gt;
  
  
  
      &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"&gt;  &lt;/script&gt;
      &lt;script&gt;
      $(function () {
        $('select#planets').listbox();
        $('select#country').listbox({'searchbar': true});
      });
    &lt;/script&gt;
  
      &lt;script language="javascript" type="text/javascript"&gt;
  
      //this will move selected items from source list to destination list            
      function move_list_items(sourceid, destinationid)
      {
          $("#"+sourceid+"  option:selected").appendTo("#"+destinationid);
      }  
      &lt;/script&gt;
  
    &lt;!-- include listbox.js --&gt;
    &lt;link href="../src/listbox.css" rel="stylesheet"&gt;
    &lt;script src="../src/listbox.js"&gt;&lt;/script&gt;
  
      &lt;style&gt;
        * {
        margin:       0px;
        padding:      0px;
      }
  
      html, body {
        font-size:    12px;
        font-family:  sans-serif;
        background:   #f5f5f5;
      }
  
      .cover {
        padding:      20px 30px;
        border:       1px solid #dedede;
        border-radius:4px;
        background:   #f9f9f9;
        box-shadow:   0px 0px 10px #a8a8a8;
  
        /* centering */
        position:     absolute;
        top:          50%;
        left:         50%;
        margin-top:  -180px;
        margin-left: -222px;
      }
  
      .lbjs { float: left; }
      .lbjs:last-of-type { margin-left: 20px; }
    &lt;/style&gt;
      &lt;body&gt;
  
        &lt;div class="cover"&gt;
      &lt;select id="country" name="country" &gt;
        &lt;option&gt;Afghanistan&lt;/option&gt;
        &lt;option&gt;Albania&lt;/option&gt;
        &lt;option&gt;Algeria&lt;/option&gt;
        &lt;option&gt;Andorra&lt;/option&gt;
      &lt;/select&gt;
      &lt;input id="moveright" type="button" value="  &gt;  "     onclick="move_list_items('country','planets');" /&gt;
  
      &lt;select id="planets" multiple="multiple" name="planets"&gt;
        &lt;option&gt;Alderaan&lt;/option&gt;
        &lt;option&gt;Corellia&lt;/option&gt;
        &lt;option&gt;Endor&lt;/option&gt;
        &lt;option&gt;Kashyyyk&lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;&lt;!-- .cover --&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>