开发者

Moving items between list-box using jQuery

开发者 https://www.devze.com 2023-01-04 09:33 出处:网络
<head> <script language=\"javascript\" type=\"text/javascript\" src=\"http://code.jquery.com/jquery-1.4.1.min.js\"></script>
<head>
<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<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>
        <开发者_StackOverflow社区;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.


try .live()

$("#MoveRight,#MoveLeft").live('click',function(event) {.....
0

精彩评论

暂无评论...
验证码 换一张
取 消