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 相关文章推荐
node.js中的fs.close方法使用说明
Dec 17 Javascript
Javascript连接Access数据库完整实例
Aug 03 Javascript
Eclipse引入jquery报错如何解决
Dec 01 Javascript
Js与Jq获取浏览器和对象值的方法
Mar 18 Javascript
详解AngularJS中的表单验证(推荐)
Nov 17 Javascript
javascript中apply/call和bind的使用
Feb 15 Javascript
Angular2 自定义validators的实现方法
Jul 05 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
Nov 28 Javascript
Node.js实现一个HTTP服务器的方法示例
May 13 Javascript
element-ui中按需引入的实现
Dec 25 Javascript
vue移动端的左右滑动事件详解
Jun 17 Javascript
vue 动态给每个页面添加title、关键词和描述的方法
Aug 28 Javascript
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
ThinkPHP3.1新特性之对页面压缩输出的支持
2014/06/19 PHP
PHP数组array类常见操作示例
2020/05/15 PHP
PHP数组基本用法与知识点总结
2020/06/02 PHP
不用MOUSEMOVE也能滑动啊
2007/05/23 Javascript
Cookie 小记
2010/04/01 Javascript
JavaScript淡入淡出渐变简单实例
2015/08/06 Javascript
Nodejs初级阶段之express
2015/11/23 NodeJs
解决vue-cli中stylus无法使用的问题方法
2017/06/19 Javascript
vue axios同步请求解决方案
2017/09/29 Javascript
Vue头像处理方案小结
2018/07/26 Javascript
Vue CLI3 如何支持less的方法示例
2018/08/29 Javascript
配置一个vue3.0项目的完整步骤
2019/04/26 Javascript
微信小程序的开发范式BeautyWe.js入门详解
2019/07/10 Javascript
JavaScript 中判断变量是否为数字的示例代码
2020/10/22 Javascript
python time模块用法实例详解
2014/09/11 Python
python中执行shell命令的几个方法小结
2014/09/18 Python
Python中type的构造函数参数含义说明
2015/06/21 Python
浅谈Python生成器generator之next和send的运行流程(详解)
2017/05/08 Python
Python+OpenCV图片局部区域像素值处理详解
2019/01/23 Python
Python中正则表达式的用法总结
2019/02/22 Python
Python3转换html到pdf的不同解决方案
2019/03/11 Python
Python pandas 列转行操作详解(类似hive中explode方法)
2020/05/18 Python
使用pygame实现垃圾分类小游戏功能(已获校级二等奖)
2020/07/23 Python
css3中用animation的steps属性制作帧动画
2019/04/25 HTML / CSS
法国时尚童装网站:Melijoe
2016/08/10 全球购物
戴尔美国官网:Dell
2016/08/31 全球购物
Wiggle新西兰:自行车、跑步、游泳
2020/05/06 全球购物
CHRONEXT英国:您的首选奢华腕表目的地
2020/03/30 全球购物
几个Linux面试题笔试题
2016/08/01 面试题
法律系毕业生自荐信范文
2014/03/27 职场文书
设备售后服务承诺书
2014/05/30 职场文书
国家奖学金获奖感言
2014/08/16 职场文书
开业庆典活动策划方案
2014/09/21 职场文书
党员自评材料范文
2014/12/17 职场文书
教师年度考核自我评鉴
2015/08/11 职场文书
Python 发送SMTP邮件的简单教程
2021/06/24 Python