tags:

views:

26

answers:

1
<head>
<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"&gt;&lt;/script&gt;
<script language="javascript" type="text/javascript">
    $(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');

        });
    });
</script>
</head>

 <body>
  <form method="get">             
   <select id="SelectLeft" multiple="multiple">
        <option value="1">Uruguay</option>
        <option value="2">United States</option>
        <option value="3">Germany</option>
        <option value="4">Argentina</option>
   </select>

  <input id="MoveRight" type="button" value=" >> " />
  <input id="MoveLeft" type="button" value=" << " />

  <select id="SelectRight" multiple="multiple">
        <option value="5">South Korea</option>
        <option value="6">Ghana</option>
        <option value="7">England</option>
        <option value="8">Mexico</option>       
  </select>
 </form>
</body>

The above code works fine with hard-coded values in the option tag. But when I try & obtain the values from the database and populate the list, the code doesn't work.

<tr>
<td>
<select id="SelectLeft" multiple="multiple">
<c:forEach var="left" items="${leftList}">
    <option value="${left}">${left}</option>
</c:forEach>
</select>
</td>

<td>
<input id="MoveRight" type="button" value=" >> " />
    <input id="MoveLeft" type="button" value=" << " />
</td>

<td>
<select id="SelectRight" multiple="multiple">
<c:forEach var="right" items="${rightList}">
    <option value="${right.rightRole.roleId}">
     ${right.rightRole.roleName}</option>
</c:forEach>
</select>
</td>
</tr>

The values are retrieved from the database to the list, but the functionality to move items between two list-boxes is not working.

+1  A: 

try .live()

$("#MoveRight,#MoveLeft").live('click',function(event) {.....
Reigel
Thanks a lot Reigel.. Reps to you :)
Sandeep