Question

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

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

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

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

Answer 1

尝试.live()

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

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

1 个答案: