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