左右切换
Posted xuaima
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了左右切换相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script>
$(function(){
// 先获取点击事件
$("#a").click(function(){
// 得到被选中的元素
$("#left option:selected").appendTo("#right");
});
// 获取点击事件
$("#b").click(function(){
// 得到被选中的元素
$("#left option").appendTo("#right")
});
});
$(function(){
$("#a1").click(function(){
$("#right option:selected").appendTo("#left");
});
$("#b1").click(function(){
$("#right option").appendTo("#left");
});
});
</script>
</head>
<body>
<p><a href="#" id="a" style="float: left;margin-left: 20px;">>></a></p><br />
<p><a href="#" id="b" style="float: left; margin-left: 20px;">>>></a></p><br />
<select multiple="multiple" id="left" style="float: left; width: 100px; height: 100px; margin-top: 20px;">
<option value="">你</option>
<option value="">我</option>
<option value="">他</option>
<option value="">她</option>
</select>
<p><a href="#" id="a1" style="float: right;margin-right: 20px;"><<</a></p><br />
<p><a href="#" id="b1" style="float: right; margin-left: 20px;"><<<</a></p><br />
<select multiple="multiple" id="right" style="float: right;width: 100px; height: 100px;">
<option value="">你们</option>
<option value="">我们</option>
<option value="">他们</option>
<option value="">她们</option>
</select>
</body>
</html>
以上是关于左右切换的主要内容，如果未能解决你的问题，请参考以下文章