参考资料：http://jquery.cuishifeng.cn/index.html
代码：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
select{
height: 140px;
border: #000 1px solid;
}
</style>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<meta charset="UTF-8">
</head>
<body>
<select multiple="multiple" id="select1">
<option value="看书">看书</option>
<option value="旅游">旅游</option>
<option value="运动">运动</option>
<option value="购物">购物</option>
</select>
<input type="button" value="<==" id="b4">
<input type="button" value="<=" id="b3">
<input type="button" value="=>" id="b1">
<input type="button" value="==>" id="b2">
<select multiple="multiple" id="select2">
<option value="游戏">游戏</option>
</select>
<script type="text/javascript">
$(document).ready(function(){
//给id为b1的按钮绑定click事件
$("#b1").click(function(){
// alert($("#select1 option:selected").val());
// id为select1且option为选中状态的元素添加到id为select2下
$("#select1 option:selected").appendTo($("#select2"));
});
});
$(document).ready(function(){
$("#b2").click(function(){
$("#select1 option").appendTo($("#select2"));
})
});
$(document).ready(function(){
$("#b3").click(function(){
$("#select2 option:selected").appendTo($("#select1"));
})
});
$(document).ready(function(){
$("#b4").click(function(){
$("#select2 option").appendTo($("#select1"));
})
});
$(document).dblclick(function(){
$("#select1 option:selected").appendTo($("#select2"));
});
</script>
</body>
</html>
界面显示：
原文地址：https://www.cnblogs.com/8013-cmf/p/8428188.html
时间： 2024-10-17 08:33:52