jquery下拉框实现将左边的选项添加到右边区域
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* { margin:0; padding:0; }
div.centent {
float:left;
text-align: center;
margin: 10px;
}
span {
display:block;
margin:2px 2px;
padding:4px 10px;
background:#898989;
cursor:pointer;
font-size:12px;
color:white;
}
</style>
<!-- 引入jQuery -->
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
//移到右边
$('#add').click(function() {
//获取选中的选项，删除并追加给对方
$('#select1 option:selected').appendTo('#select2'); //appendTo（）方法可以用来移动元素，移动元素时首先从文档上删除此元素，然后将该元素插入得到文档中的指定节点
});
//移到左边
$('#remove').click(function() {
$('#select2 option:selected').appendTo('#select1');
});
//全部移到右边
$('#add_all').click(function() {
//获取全部的选项,删除并追加给对方
$('#select1 option').appendTo('#select2');
});
//全部移到左边
$('#remove_all').click(function() {
$('#select2 option').appendTo('#select1');
});
//双击选项
$('#select1').dblclick(function(){ //绑定双击事件
//获取全部的选项,删除并追加给对方
$("option:selected",this).appendTo('#select2'); //追加给对方
});
//双击选项
$('#select2').dblclick(function(){
$("option:selected",this).appendTo('#select1');
}); });
</script> </head>
<body> <div class="centent">
<select multiple="multiple" id="select1" style="width:100px;height:160px;">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
<option value="4">选项4</option>
<option value="5">选项5</option>
<option value="6">选项6</option>
<option value="7">选项7</option>
</select>
<div>
<span id="add" >选中添加到右边>></span>
<span id="add_all" >全部添加到右边>></span>
</div>
</div> <div class="centent">
<select multiple="multiple" id="select2" style="width: 100px;height:160px;">
<option value="8">选项8</option>
</select>
<div>
<span id="remove"><<选中删除到左边</span>
<span id="remove_all"><<全部删除到左边</span>
</div>
</div> </body>
</html>
实现效果：
remove（） appendTo（）使用对比：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3-4-2</title>
<!-- 引入jQuery -->
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){ //1:
var $li = $("ul li:eq(1)").remove(); // 获取第二个<li>元素节点后，将它从网页中删除。
$li.appendTo("ul"); // 把刚才删除的又重新添加到<ul>元素里
//所以，删除只是从网页中删除，在jQuery对象中，这个元素还是存在的，我们可以重新获取它 // 2:
$("#appRemove").click(function(){ $("ul li:eq(0)").appendTo("#appRemove"); }); });
//]]>
</script>
</head>
<body>
<p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
<ul>
<li title='苹果'>苹果</li>
<li title='橘子'>橘子</li>
<li title='菠萝'>菠萝</li>
</ul> <div id="appRemove">appendTo实现移动删除元素</div>
</body>
</html>
remove()与detach（）区别：
相同点： 都可以从DOM中去掉所有匹配的元素
区别：detach（）不会把匹配的元素从jquery对象中删除，因而可以在将来使用这些匹配的元素；所有绑定的时间、附件的数据等都会保留下来
remove（）之前绑定的事件将失效
jquery下拉框实现将左边的选项添加到右边区域的更多相关文章
- jQuery下拉框操作系列$("option:selected",this) &&（锋利的jQuery）
jQuery下拉框操作系列$("option:selected",this) &&(锋利的jQuery) <!DOCTYPE html> <ht ...
- jquery 下拉框 收藏
jquery 下拉框 Query获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code. ...
- 带搜索框的jQuery下拉框插件
由于下拉框的条数有几十个,于是打算找一个可以搜索查找功能的下拉框,刚开始在网上看了几个,都是有浏览器兼容性问题,后来看到这个“带搜索框的jQuery下拉框美化插件 searchable”,看演示代码简 ...
- Ajax jQuery下拉框联动案例
需求: 使用ajax和jQuery实现下拉框联动. 注意:需要加入jquery-2.1.1.min.js 前台 <!DOCTYPE html> <html> <head& ...
- Jquery下拉框左右选择
1.说明 本文demo实现下拉框左右选择,本文地址:http://www.cnblogs.com/lengzhan/p/6423023.html 2.代码 <!DOCTYPE html PUBL ...
- jQuery下拉框扩展和美化插件Chosen
Chosen 是一个支持jquery的select下拉框美化插件,它能让丑陋的.很长的select选择框变的更好看.更方便.不仅如此,它更扩展了select,增加了自动筛选的功能.它可对列表进行分组, ...
- jQuery下拉框插件8种效果
jQuery自定义漂亮的下拉框插件8种效果 jquery美化选择器实例有:边框.下划线. 伸缩 .滑动. 覆盖. 旋转. 弹出层选择 .环形效果. 在线预览 <body class=" ...
- jquery 下拉框插件,实现智能补全,模糊搜索,多选
近期已朋友问我问题,实现类似淘宝百度的下啦搜索条,看了网上好多帖子,都看起来好复杂,而且引用了好多没用的东西,而且多选选择内容多之后容易样式奔溃, 无奈之下只好自己改了, 话不多说上效果图: 模糊搜索 ...
- jQuery 下拉框输入匹配提示选项
做页面输入时,为方便输入和提高用户体验,常用下拉框,当下拉选项数据很多时,也不易找到想要的选项,这时,提供一种下拉框输入匹配提示选项,如下: 图示
随机推荐
- 【转】JavaSript模块规范 - AMD规范与CMD规范介绍
JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发? 模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题 ...
- android面试题（转）
1. Android dvm的进程和Linux的进程, 应用程序的进程是否为同一个概念 DVM指dalivk的虚拟机.每一个Android应用程序都在它自己的进程中运行,都拥有一个独立的Dalvik虚 ...
- XRPictureBox z
XRPictureBox 大小加入是40x40 我绑定的图片好比是60X50 , 在不自己写代码的情况下,XRPictureBox 有没有什么属性可以调整,比如像SizeMode那种? // Set ...
- PostgreSQL的备份和恢复
关于PostgreSQL的备份和恢复详细信息请参阅<PostgreSQL中文文档>. 备份: #pg_dump --username=postgres v70_demo > v70_ ...
- .net中判断距离高考多长时间的js函数
在JS中判断距离高考(此处举例高考)的时间函数 JS中代码: function djs() { var severtime= new Date(); //获取服务器日期 var year=severt ...
- Google搜索的常用技巧
个人搜索方案 1.选择合适的搜索词,一些行业术语或专家名字可以带来更加高质量的结果. 2.搜索词手动使用空格分隔,先进行第一次搜索,看搜索结果标题是否满足预期,如果不满足,采用更换关键词,添加关键词, ...
- 一个有趣的模拟光照的shader(类似法线贴图)
最近使用unity,碰到到一个很有趣的例子.场景无光线,却模拟出了光照,效果挺好.其思路与法线贴图原理异曲同工. 原作者提供的效果印象深刻. 模型除了使用原来的diffuse贴图外,还用到了一张模拟记 ...
- 2015-11-02-js
1.对象 创建方式有两种,一时通过new 后加object构造函数,二是用字面量法, var box=new object(); var box={ name='bokeyuan'; }; 访问对象: ...
- AI钻石天鹅风格
第1步:描绘轮廓 你需要对你的设计有个总体的概念.利用照片和钢笔工具(P)描出轮廓.把填充颜色设为无,描边颜色设为黑色,1pt 粗细.这将作为你完成剩下设计的指导.编组 (Ctrl+G)你的线条并在图 ...
- 《Genesis-3D开源游戏引擎--横版格斗游戏制作教程08：虚拟键盘实现》--本系列完结
8.虚拟键盘实现 概述: 硬键盘就是物理键盘,平时敲的那种.软键盘是虚拟的键盘,不是在键盘上,而是在"屏幕"上.虚拟按键就是虚拟键盘的一部分,根据功能需求,提供部分按键效果的UI可 ...