<!doctype html>
<html>
<head>
<meta charset="utf-8">
<Title> movable box </ title>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script language="javascript">
$(document).ready(function(e){
// checkbox mutually movable feature
$('#menu').dblclick(function(){
if($("#menu option:selected").length>0)
{
$("#menu option:selected").each(function(){
$("#add_menu").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option");
$(this).remove();
})
}
else
{
alert ( "Please select the option you want to add!");
}
});
$('#add_menu').dblclick(function(){
if($("#add_menu option:selected").length>0)
{
$("#add_menu option:selected").each(function(){
$("#menu").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option");
$(this).remove();
})
}
else
{
alert ( "Please select the option to be removed!");
}
});
})
</script>
</head>
<body>
Double-click the option to move data around production: bright studio gmll.cn
<table>
<tr>
<td rowspan="4">选项：</td>
<td rowspan="4"><select name="menu" size="5" multiple="multiple" id="menu" style="width:100px; height:100px;">
<option value="001">新闻</option>
<option value="002" selected>客房</option>
<option value="003">婚宴</option>
<option value="004">问答</option>
<option value="005">评论</option>
<option value="006">会议</option>
</select>
</td>
<td> </td>
<td rowspan="4"><select id="add_menu" size="5" multiple="multiple" style="width:100px; height:100px;">
</select></td>
</tr>
<tr>
<td>>></td>
</tr>
<tr>
<td><<</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
jquery can move around the dropdown list box data
Guess you like
Origin www.cnblogs.com/trip-j/p/12060667.html
Recommended
Ranking