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 相关文章推荐
javascript中的document.open()方法使用介绍
Oct 09 Javascript
Javascript设计模式之观察者模式(推荐)
Mar 29 Javascript
再谈javascript注入 黑客必备!
Sep 14 Javascript
微信小程序 UI与容器组件总结
Feb 21 Javascript
详解Vue.js分发之作用域槽
Jun 13 Javascript
JavaScript类的继承方法小结【组合继承分析】
Jul 11 Javascript
Vue父子组件双向绑定传值的实现方法
Jul 31 Javascript
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
element上传组件循环引用及简单时间倒计时的实现
Oct 01 Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
Feb 12 Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
Apr 01 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
Jun 13 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
也谈php网站在线人数统计
2008/04/09 PHP
PHP防止表单重复提交的几种常用方法汇总
2014/08/19 PHP
ThinkPHP独立分组使用的注意事项
2014/11/25 PHP
PHP简单实现循环链表功能示例
2017/11/10 PHP
浅谈javascript中的作用域
2012/04/07 Javascript
jquery 插件学习(一)
2012/08/06 Javascript
js+JQuery返回顶部功能如何实现
2012/12/03 Javascript
javascript中的onkeyup和onkeydown区别介绍
2013/04/28 Javascript
JS实现关键字搜索时的相关下拉字段效果
2014/08/05 Javascript
JS小游戏之极速快跑源码详解
2014/09/25 Javascript
jQuery EasyUI Dialog拖不下来如何解决
2015/09/28 Javascript
ClearTimeout消除闪动实例代码
2016/02/29 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
2016/04/29 Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
2016/12/15 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
2018/02/04 Javascript
Vue Router的懒加载路径的解决方法
2018/06/21 Javascript
VUE v-model表单数据双向绑定完整示例
2019/01/21 Javascript
vue页面切换项目实现转场动画的方法
2019/11/12 Javascript
[01:14]2019完美世界城市挑战赛(秋季赛)全国总决赛精彩花絮
2020/01/08 DOTA
Python实现备份文件实例
2014/09/16 Python
剖析Django中模版标签的解析与参数传递
2015/07/21 Python
python中实现数组和列表读取一列的方法
2018/04/03 Python
关于python写入文件自动换行的问题
2018/06/23 Python
python 进程 进程池 进程间通信实现解析
2019/08/23 Python
使用Python给头像戴上圣诞帽的图像操作过程解析
2019/09/20 Python
Django实现从数据库中获取到的数据转换为dict
2020/03/27 Python
Python使用OpenPyXL处理Excel表格
2020/07/02 Python
OpenCV+Python3.5 简易手势识别的实现
2020/12/21 Python
Numpy ndarray 多维数组对象的使用
2021/02/10 Python
资料员岗位职责
2013/11/17 职场文书
公司授权委托书范文
2014/08/02 职场文书
2015年乡镇组织委员工作总结
2015/10/23 职场文书
街道办残联2016年助残日活动总结
2016/04/01 职场文书
JS Canvas接口和动画效果大全
2021/04/29 Javascript
基于JavaScript实现年月日三级联动
2021/06/22 Javascript
MySQL库表太大怎么办? 数据库分库分表项目实践
2022/04/11 MySQL