码迷,mamicode.com
首页 > 其他好文 > 详细

左右切换

时间:2019-03-05 21:39:49      阅读:199      评论:0      收藏:0      [点我收藏+]

标签:点击   style   oat   doc   utf-8   tle   text   javascrip   charset   

<!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;">&gt;&gt;</a></p><br />
<p><a href="#" id="b" style="float: left; margin-left: 20px;">&gt;&gt;&gt;</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;">&lt;&lt;</a></p><br />
<p><a href="#" id="b1" style="float: right; margin-left: 20px;">&lt;&lt;&lt;</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>

左右切换

标签:点击   style   oat   doc   utf-8   tle   text   javascrip   charset   

原文地址:https://www.cnblogs.com/xuaima/p/10479485.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!