<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>
将值从数据库检索到列表,但是在两个列表框之间移动项目的功能不起作用。
答案 0 :(得分:1)
尝试.live()
$("#MoveRight,#MoveLeft").live('click',function(event) {.....