jQuery实现下拉框左右移动（全部移动，已选移动）
更新时间：2016年04月15日 11:35:44 作者：ylbtech
本文主要介绍jQuery中利用appendTo()方法追加元素已实现左右移动的功能，希望对大家有所帮助。
用到的方法为：appendTo()
格式：$(content).appendTo(selector)
appendTo() 方法在被选元素的结尾（仍然在内部）插入指定内容。
click() 方法触发 click 事件，或规定当发生 click 事件时运行的函数。
看一下具体实现的代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#add").click(function () {
//1,方式一
// var $option = $("#select1 option:selected"); //获取选中的选项
// var $remove = $option.remove(); //删除下拉列表中选中的选项
// $remove.appendTo("#select2"); //追加给对方
//2，方式二
var $option = $("#select1 option:selected"); //获取选中的选项
$option.appendTo("#select2"); //追加给对方
});
$("#add_all").click(function () {
var $option = $("#select1 option");
$option.appendTo("#select2");
});
$("#remove").click(function () {
var $option = $("#select2 option:selected");
$option.appendTo("#select1");
});
$("#remove_all").click(function () {
var $option = $("#select2 option");
$option.appendTo("#select1");
});
});
</script>
</head>
<body>
<h3>下拉框应用</h3>
<table>
<tr>
<td>
<select id="select1" multiple="multiple" style="width:100px;">
<option value="News">News</option>
<option value="Sport">Sport</option>
<option value="Education">Education</option>
<option value="Technology">Technology</option>
<option value="Art">Art</option>
</select>
</td>
<td>
<button id="add">
>|</button><br />
<button id="add_all">
>></button><br />
<button id="remove_all">
<<</button><br />
<button id="remove">
|<</button>
</td>
<td>
<select id="select2" multiple="multiple" style="width:100px;">
</select>
</td>
</tr>
</table>
</body>
</html>
运行效果：
相关文章
下面小编就为大家带来一篇用户管理的设计_jquery的ajax实现二级联动效果。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
js制作的鼠标悬浮时产生的下拉框效果，需要的朋友可以参考下2012-10-10
这篇文章主要介绍了jQuery实现冻结表头的方法,实例分析了jQuery扩展方法的实现技巧及固定表格样式的方法,需要的朋友可以参考下2015-03-03
30个让人兴奋的视差滚动（Parallax Scrolling）效果网站
视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。作为今年网页设计的热点趋势，越来越多的网站应用了这项技术。今天这篇文章就与大家分享30个视差滚动效果的网页设计作品，一起欣赏（以拖动滚动条方式浏览效果更佳）2012-03-03
下面小编就为大家带来一篇利用JQuery直接调用asp.net后台的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
这篇文章主要介绍了jquery预加载图片的方法,涉及jQuery操作图片的相关技巧,需要的朋友可以参考下2015-05-05
这篇文章主要介绍了JQuery右键菜单插件ContextMenu使用指南,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了利用jQuery异步上传文件的插件用法详解,需要的朋友可以参考下2017-07-07
JQuery中关于jquery.js与jquery.min.js的比较探讨
jquery-1.4.2.min.js是优化的，而query-1.4.2.js是易于开发着阅读的，具体详解祥看本文，希望对你有所帮助2013-05-05
在介绍如何扩展jQuery之前，先大致看下jQuery源码（以1.3.2版本为例）。2010-05-05
最新评论