title: Moving items between list-box using jQuery
body: <pre><code>&lt;head&gt;
  &lt;script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"&gt;&lt;/script&gt;
  &lt;script language="javascript" type="text/javascript"&gt;
      $(function() {
          $("#MoveRight,#MoveLeft").click(function(event) {
              var id = $(event.target).attr("id");
              var selectFrom = id == "MoveRight" ? "#SelectLeft" : "#SelectRight";
              var moveTo = id == "MoveRight" ? "#SelectRight" : "#SelectLeft";
  
              var selectedItems = $(selectFrom + " :selected").toArray();
              $(moveTo).append(selectedItems);
              alert('abcd');
  
          });
      });
  &lt;/script&gt;
  &lt;/head&gt;
  
   &lt;body&gt;
    &lt;form method="get"&gt;             
     &lt;select id="SelectLeft" multiple="multiple"&gt;
          &lt;option value="1"&gt;Uruguay&lt;/option&gt;
          &lt;option value="2"&gt;United States&lt;/option&gt;
          &lt;option value="3"&gt;Germany&lt;/option&gt;
          &lt;option value="4"&gt;Argentina&lt;/option&gt;
     &lt;/select&gt;
  
    &lt;input id="MoveRight" type="button" value=" &gt;&gt; " /&gt;
    &lt;input id="MoveLeft" type="button" value=" &lt;&lt; " /&gt;
  
    &lt;select id="SelectRight" multiple="multiple"&gt;
          &lt;option value="5"&gt;South Korea&lt;/option&gt;
          &lt;option value="6"&gt;Ghana&lt;/option&gt;
          &lt;option value="7"&gt;England&lt;/option&gt;
          &lt;option value="8"&gt;Mexico&lt;/option&gt;       
    &lt;/select&gt;
   &lt;/form&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>The above code works fine with hard-coded values in the option tag. But when I try &amp; obtain the values from the database and populate the list, the code doesn't work.</p>
  
  <pre><code>&lt;tr&gt;
  &lt;td&gt;
  &lt;select id="SelectLeft" multiple="multiple"&gt;
  &lt;c:forEach var="left" items="${leftList}"&gt;
      &lt;option value="${left}"&gt;${left}&lt;/option&gt;
  &lt;/c:forEach&gt;
  &lt;/select&gt;
  &lt;/td&gt;
  
  &lt;td&gt;
  &lt;input id="MoveRight" type="button" value=" &gt;&gt; " /&gt;
      &lt;input id="MoveLeft" type="button" value=" &lt;&lt; " /&gt;
  &lt;/td&gt;
  
  &lt;td&gt;
  &lt;select id="SelectRight" multiple="multiple"&gt;
  &lt;c:forEach var="right" items="${rightList}"&gt;
      &lt;option value="${right.rightRole.roleId}"&gt;
       ${right.rightRole.roleName}&lt;/option&gt;
  &lt;/c:forEach&gt;
  &lt;/select&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>The values are retrieved from the database to the list, but the functionality to move items between two list-boxes is not working.</p>