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 相关文章推荐
js之事件冒泡和事件捕获详细介绍
Oct 28 Javascript
Jquery getJSON方法详细分析
Dec 26 Javascript
JavaScript面对国际化编程时的一些建议
Jun 24 Javascript
PageSwitch插件实现100种不同图片切换效果
Jul 28 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
Apr 07 Javascript
javascript中对Date类型的常用操作小结
May 19 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
Aug 29 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
Aug 17 Javascript
实时监控input框,实现输入框与下拉框联动的实例
Jan 23 Javascript
让axios发送表单请求形式的键值对post数据的实例
Aug 11 Javascript
JS实现“全选”和&quot;全不选&quot;功能代码实例
Feb 06 Javascript
一篇文章学会Vue中间件管道
Jun 20 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
php 字符串压缩方法比较示例
2014/01/23 PHP
PHP判断数据库中的记录是否存在的方法
2014/11/14 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
php判断目录存在的简单方法
2019/09/26 PHP
laravel框架数据库配置及操作数据库示例
2019/10/10 PHP
javascript SocialHistory 检查访问者是否访问过某站点
2008/08/02 Javascript
jQuery的写法不同导致的兼容性问题的解决方法
2010/07/29 Javascript
THREE.JS入门教程(4)创建粒子系统
2013/01/24 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
2015/06/05 Javascript
使用JavaScript实现旋转的彩圈特效
2015/06/23 Javascript
深入分析Javascript事件代理
2016/01/30 Javascript
JS获取input file绝对路径的方法(推荐)
2016/08/02 Javascript
文件上传插件SWFUpload的使用指南
2016/11/29 Javascript
js转换对象为xml
2017/02/17 Javascript
JQuery实现定时刷新功能代码
2017/05/09 jQuery
vue弹窗组件使用方法
2018/04/28 Javascript
angular 未登录状态拦截路由跳转的方法
2018/10/09 Javascript
express.js中间件说明详解
2019/03/19 Javascript
详解mpvue实现对苹果X安全区域的适配
2019/07/31 Javascript
vue项目部署到nginx/tomcat服务器的实现
2019/08/26 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
2019/09/28 Javascript
小程序实现投票进度条
2019/11/20 Javascript
让mocha支持ES6模块的方法实现
2020/01/14 Javascript
原生JS实现记忆翻牌游戏
2020/07/31 Javascript
[42:27]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第三局
2016/03/05 DOTA
举例讲解Python中的Null模式与桥接模式编程
2016/02/02 Python
Python的re模块正则表达式操作
2016/05/25 Python
python enumerate内置函数用法总结
2020/01/07 Python
Python实现自动访问网页的例子
2020/02/21 Python
使用CSS3 制作一个material-design 风格登录界面实例
2016/12/12 HTML / CSS
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
2013/01/09 HTML / CSS
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
2015/08/31 HTML / CSS
几个判断型的面试题
2012/07/03 面试题
2015年电气技术员工作总结
2015/07/24 职场文书
创业项目大全(适合在家创业的项目)
2019/08/15 职场文书
在ubuntu下安装go开发环境的全过程
2022/08/05 Golang