当前位置:  编程技术>jquery

jQuery 多选列表框(multiple select)示例

    来源: 互联网  发布时间:2014-10-04

    本文导语:  参照《锋利的jQuery》这本书的例子敲的代码,在项目中的应用是根据这例子来改造的,在此作一下笔记。 效果图,如下: js代码:   代码示例:       $(document).ready(function(){          $('#add').click(function(){        ...

参照《锋利的jQuery》这本书的例子敲的代码,在项目中的应用是根据这例子来改造的,在此作一下笔记。

效果图,如下:

js代码:
 

代码示例:
 
    $(document).ready(function(){ 
        $('#add').click(function(){ 
            var $options = $('#select1 option:selected');//获取当前选中的项 
            var $remove = $options.remove();//删除下拉列表中选中的项 
            $remove.appendTo('#select2');//追加给对方 
        }); 
         
        $('#remove').click(function(){ 
            var $removeOptions = $('#select2 option:selected'); 
            $removeOptions.appendTo('#select1');//删除和追加可以用appendTo()直接完成 
        }); 
         
        $('#addAll').click(function(){ 
            var $options = $('#select1 option'); 
            $options.appendTo('#select2'); 
        }); 
         
        $('#removeAll').click(function(){ 
            var $options = $('#select2 option'); 
            $options.appendTo('#select1'); 
        }); 
         
        //双击事件 
        $('#select1').dblclick(function(){ 
            //var $options = $('#select1 option:selected'); 
            var $options = $('option:selected', this);//注意此处“option”与“:”之间的空格,有空格是不可以的 
            $options.appendTo('#select2'); 
        }); 
         
        $('#select2').dblclick(function(){ 
            $('#select2 option:selected').appendTo('#select1'); 
        }); 
         
    }); 
 

jsp页面代码:
 

代码示例:
 
 
 
     
        选项一 
        选项二 
        选项三 
        选项四 
        选项五 
        选项六 
        选项七 
        选项八 
        选项九 
     
          
             
     
 
 
 
 
    选中添加到右边>> 
    <<选中添加到左边
 
    全部添加到右边>> 
    <<全部添加到左边 
 
 
 

    
 
 

您可能感兴趣的文章:

  • jQuery定时器插件 jQuery Timers应用示例
  • jquery打开dialog的简单示例
  • jQuery animate方法定位页面具体位置(示例)
  • jQuery设置input type值示例
  • jquery弹窗代码示例
  • jquery的父子兄弟节点查找示例代码
  • jquery获取第几个元素方法示例 jquery选择器
  • jquery遍历checkbox简单示例
  • jquery动态添加option示例
  • Jquery定时器的简单示例
  • JQuery获取上传文件大小(示例)
  • Jquery在指定DIV加载HTML示例代码
  • jQuery获得内容和属性示例代码
  • jQuery的each终止或跳过示例代码
  • jQuery获得内容和属性方法及示例
  • jquery根据name属性查找示例
  • jQuery find与children方法示例
  • jQuery回车键绑定点击事件示例
  • jQuery 滚动示例插件 kinetic
  • jQuery设置CSS属性(示例)
  • jQuery文件上传插件 Multiple File Upload
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • jquery下拉select控件操作方法分享(jquery操作select)
  • jQuery操作select option选项(增加 删除 修改)
  • Jquery禁用所有select标签的值的方法
  • jquery模拟select控件
  • jquery select默认选中的设置方法
  • jQuery下拉框美化插件 Select-or-Die
  • jQuery操作select下拉框的text值和value值的方法
  • jquery对select列表取值与赋值
  • jquery 删除select中option选项
  • JQUERY 设置SELECT选中项代码
  • jquery的clone方法应用于textarea和select的bug修复
  • jQuery 选项插件 Bootstrap Select
  • jQuery对Select的操作大集合(收藏)
  • jQuery下拉框美化插件 Select-or-Die iis7站长之家
  • jQuery转换选择框为按钮的插件 Select2Buttons
  • jquery对select下拉框取值与赋值方法汇总
  • jquery 操作select取值与设置选中值
  • jquery操作select详解(取值,设置选中)
  • jquery实现Select option项的添加、删除、取值
  • jquery中select操作的例子
  • 通过javascript库JQuery实现页面跳转功能代码
  • jQuery鼠标动画插件 jquery-ahover
  • jQuery概述,代码举例及最新版下载
  • jQuery向导插件 Jquery Wizard Plugin
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jQuery圆角插件 jQuery Corners
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3