<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>可移动的复选框</title>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script language="javascript">
$(document).ready(function(e){
//多选框相互可移动 功能
$('#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("请选择要添加的选项！");
}
});
$('#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("请选择要移除的选项！");
}
});
})
</script>
</head>
<body>
双击选项 可左右移动数据 制作：光明工作室 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下拉单选框可左右移动数据
猜你喜欢
转载自www.cnblogs.com/trip-j/p/12060667.html
今日推荐
周排行