使用 jQuery 在列表框之间移动项目答案

【问题标题】：Moving items between list-box using jQuery使用 jQuery 在列表框之间移动项目
【发布时间】：2010-06-24 09:23:21
【问题描述】：

<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>
        <option value="6">Ghana</option>
        <option value="7">England</option>
        <option value="8">Mexico</option>       
  </select>
 </form>
</body>

上面的代码适用于选项标签中的硬编码值。但是当我尝试从数据库中获取值并填充列表时，代码不起作用。

<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>

值从数据库检索到列表，但在两个列表框之间移动项目的功能不起作用。

【问题讨论】：

标签： jquery html jstl

【解决方案1】：

试试.live()

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

【讨论】：

非常感谢 Reigel .. 代表你 :)