jQuery实现下拉框左右选择的简单实例


Posted in Javascript onFebruary 22, 2014

jQuery实现下拉框左右选择的简单实例

就是实现这个效果的,选中添加到右边,全部添加到右边,选中删除到左边,全部删除到左边。

html部分:

<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>

这里要注意的是select的multiple属性,只有添加了之后,才会在select框中出现多个select选项。
否则只会显示出一条。

jQuery代码解析:

<script type="text/javascript">
$(function(){
    //移到右边
    $('#add').click(function() {
    //获取选中的选项,删除并追加给对方
        $('#select1 option:selected').appendTo('#select2');
    });
    //移到左边
    $('#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>

这里要注意的是$("option:selected",this)。这个看起来有点奇怪。其实$()有2个参数,一个是选择器,一个是作用域。 要和$("xxxx,xxx")区分。通常意义下的$('xxxx')其实是默认了第二个作用域。完整说应该是$('xxxx',document)。这里加上this之后,作用域就限制在#select1中或#select2中了。也就是select1中的选中项被添加到#select2的后面。

效果类似于$("#select1 option:selected")。

如果不加上,this这个参数的话,就会牵扯到全局中的选中项。就会出错。

注意点2:

append()与appendTo()方法的区别。

append(content|fn)向每个匹配的元素内部追加内容。

appendTo(content)把所有匹配的元素追加到另一个指定的元素元素集合中。

前者是向匹配的元素中添加内容的,后者是把匹配的素有元素追加到另一个指定的元素集合中的。

比如$("p").append("<b>Hello</b>");是向p元素中追加内容<b>Hello</b>。

原来的p元素内容:<p>I would like to say: </p>现在的p元素内容:[ <p>I would like to say: <b>Hello</b></p> ]$("p").appendTo("div");将p元素追加到div元素中。原来的内容:<p>I would like to say: </p>
<div></div><div></div>结果:<div><p>I would like to say: </p></div> <div><p>I would like to say: </p></div>

Javascript 相关文章推荐
使用Firebug对js进行断点调试的图文方法
Apr 02 Javascript
JavaScript可否多线程? 深入理解JavaScript定时机制
May 23 Javascript
js弹出框轻量级插件jquery.boxy使用介绍
Jan 15 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
Nov 26 Javascript
下雪了 javascript实现雪花飞舞
Aug 02 Javascript
jQuery的框架介绍
May 11 Javascript
JS实现动态增加和删除li标签行的实例代码
Oct 16 Javascript
JavaScript 计算笛卡尔积实例详解
Dec 02 Javascript
微信小程序媒体组件详解(视频,音乐,图片)
Sep 19 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
Mar 08 Javascript
详解Jest结合Vue-test-utils使用的初步实践
Jun 27 Javascript
vue+spring boot实现校验码功能
May 27 Vue.js
jquery取消选择select下拉框示例代码
Feb 22 #Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
Feb 21 #Javascript
jquery组件使用中遇到的问题整理及解决
Feb 21 #Javascript
js document.write()使用介绍
Feb 21 #Javascript
jQuery写fadeTo示例代码
Feb 21 #Javascript
iframe父页面获取子页面参数的方法
Feb 21 #Javascript
表单序列化与jq中的serialize使用示例
Feb 21 #Javascript
You might like
一个阿拉伯数字转中文数字的函数
2006/10/09 PHP
php 应用程序安全防范技术研究
2009/09/25 PHP
11个PHPer必须要了解的编程规范
2014/09/22 PHP
php读取文件内容的方法汇总
2015/01/24 PHP
SESSION存放在数据库用法实例
2015/08/08 PHP
thinkphp框架下实现登录、注册、找回密码功能
2016/04/06 PHP
详解PHP神奇又有用的Trait
2019/03/25 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
传智播客学习之JavaScript基础篇
2009/11/13 Javascript
jquery下将选择的checkbox的id组成字符串的方法
2010/11/28 Javascript
javascript列表框操作函数集合汇总
2013/11/28 Javascript
取消选中单选框radio的三种方式示例介绍
2013/12/23 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
2015/08/17 Javascript
一个例子轻松学会Vue.js
2017/01/02 Javascript
Vue-Cli中自定义过滤器的实现代码
2017/08/12 Javascript
详细介绍RxJS在Angular中的应用
2017/09/23 Javascript
在小程序中使用腾讯视频插件播放教程视频的方法
2018/07/10 Javascript
element ui 表格动态列显示空白bug 修复方法
2018/09/04 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
2019/02/19 jQuery
pm2发布node配置文件ecosystem.json详解
2019/05/15 Javascript
详解Angular cli配置过程记录
2019/11/07 Javascript
vue递归获取父元素的元素实例
2020/08/07 Javascript
[00:35]DOTA2上海特级锦标赛 Newbee战队宣传片
2016/03/03 DOTA
Python中datetime常用时间处理方法
2015/06/15 Python
Linux-ubuntu16.04 Python3.5配置OpenCV3.2的方法
2018/04/02 Python
Python设计模式之简单工厂模式实例详解
2019/01/22 Python
python实现爬虫抓取小说功能示例【抓取金庸小说】
2019/08/09 Python
纯css3使用vw和vh实现自适应的方法
2018/02/09 HTML / CSS
全球知名的婚恋交友网站:Match.com
2017/01/05 全球购物
婴儿鞋,独特的婴儿服装和配件:Zutano
2018/11/03 全球购物
软件测试笔试题
2012/10/25 面试题
应届电子商务毕业自荐书范文
2014/02/11 职场文书
学术会议邀请函
2015/01/30 职场文书
董事会决议范本
2015/07/01 职场文书
2015中学政教处工作总结
2015/07/22 职场文书