<!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" >选中添加到右边&gt;&gt;</span>

            <span id="add_all" >全部添加到右边&gt;&gt;</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">&lt;&lt;选中删除到左边</span>

            <span id="remove_all">&lt;&lt;全部删除到左边</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下拉框实现将左边的选项添加到右边区域的更多相关文章

  1. jQuery下拉框操作系列$("option:selected",this) &&（锋利的jQuery）

    jQuery下拉框操作系列$("option:selected",this)  &&(锋利的jQuery) <!DOCTYPE html> <ht ...

  2. jquery 下拉框 收藏

    jquery 下拉框  Query获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code. ...

  3. 带搜索框的jQuery下拉框插件

    由于下拉框的条数有几十个,于是打算找一个可以搜索查找功能的下拉框,刚开始在网上看了几个,都是有浏览器兼容性问题,后来看到这个“带搜索框的jQuery下拉框美化插件 searchable”,看演示代码简 ...

  4. Ajax jQuery下拉框联动案例

    需求: 使用ajax和jQuery实现下拉框联动. 注意:需要加入jquery-2.1.1.min.js 前台 <!DOCTYPE html> <html> <head& ...

  5. Jquery下拉框左右选择

    1.说明 本文demo实现下拉框左右选择,本文地址:http://www.cnblogs.com/lengzhan/p/6423023.html 2.代码 <!DOCTYPE html PUBL ...

  6. jQuery下拉框扩展和美化插件Chosen

    Chosen 是一个支持jquery的select下拉框美化插件,它能让丑陋的.很长的select选择框变的更好看.更方便.不仅如此,它更扩展了select,增加了自动筛选的功能.它可对列表进行分组, ...

  7. jQuery下拉框插件8种效果

    jQuery自定义漂亮的下拉框插件8种效果 jquery美化选择器实例有:边框.下划线. 伸缩 .滑动. 覆盖. 旋转. 弹出层选择 .环形效果. 在线预览 <body class=" ...

  8. jquery 下拉框插件,实现智能补全,模糊搜索,多选

    近期已朋友问我问题,实现类似淘宝百度的下啦搜索条,看了网上好多帖子,都看起来好复杂,而且引用了好多没用的东西,而且多选选择内容多之后容易样式奔溃, 无奈之下只好自己改了, 话不多说上效果图: 模糊搜索 ...

  9. jQuery 下拉框输入匹配提示选项

    做页面输入时,为方便输入和提高用户体验,常用下拉框,当下拉选项数据很多时,也不易找到想要的选项,这时,提供一种下拉框输入匹配提示选项,如下: 图示

随机推荐

  1. 【转】使用Xcode和Instruments调试解决iOS内存泄露

    原文网址:http://blog.csdn.net/totogo2010/article/details/8233565 虽然iOS 5.0版本之后加入了ARC机制,由于相互引用关系比较复杂时,内存泄 ...

  2. php.ini中Magic_Quotes_Gpc开关设置

    如果你网站空间的php.ini文件里的magic_quotes_gpc设成了off,那么PHP就不会在敏感字符前加上反斜杠(\\),由于表单提交的内容可能含有敏感字符,如单引号('),就导致了SQL ...

  3. jQuery遮罩插件jQuery.blockUI.js简介

    利用Jquery.blockui.js创建可拖动.自定义内容的弹出层 利用Jquery.blockui.js创建可拖动.自定义内容的弹出层 目标 : 1 . 弹出层的内容可以自定义任意的HTML元素 ...

  4. 设置TextView控件的背景透明度和字体透明度

    TextView tv = (TextView) findViewById(R.id.xx); 第1种:tv.setBackgroundColor(Color.argb(255, 0, 255, 0) ...

  5. TCP经受时延的ACK

    下午看<卷1>的时候,感觉“TCP经受时延ACK”这段看的有些迷糊,最后还算理解了,所以这里记下来以免以后又忘了. 经受时延的ACK就是在接收到数据后不立马确认,而是等到内核的一个定时器到 ...

  6. 让pre标签自动换行示例代码

    pre 元素可定义预格式化的文本.被包围在 pre 元素中的文本通常会保留空格和换行符.而文本也会呈现为等宽字体. <pre> 标签的一个常见应用就是用来表示计算机的源代码.对于技术博客经 ...

  7. pssh 不能执行指定用户命令

    问题: 一个脚本a.sh(必须root用户执行),在本地可以运行,通过pssh  -h ip_file "cd /home/byte/a.sh"不能执行. 原因: 分析应该是ssh ...

  8. unity3d Hair real time rendering 真实头发实时渲染（转）

    惊现塞拉酱 算法是Weta Digital根据siggraph2003的论文加以改进,改进之前使用的是Kajiya and Kay’s 模型,它能量不守恒,也就是说不是基于物理的,不准确 电镜下真实头 ...

  9. 在 Asp.NET MVC 中使用 SignalR 实现推送功能

    一,简介Signal 是微软支持的一个运行在 Dot NET 平台上的 html websocket 框架.它出现的主要目的是实现服务器主动推送(Push)消息到客户端页面,这样客户端就不必重新发送请 ...

  10. MVC dropdownlist使用

    View中代码 @{ ViewBag.Title = "dropdownlist"; } <h2>dropdownlist</h2> @using (Htm ...