jquery实现下拉框功能效果【实例代码】


Posted in Javascript onMay 06, 2016

说不清楚,直接上图

jquery实现下拉框功能效果【实例代码】

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    div.centent {
      float: left;
      text-align: center;
      margin: 10px;
    }

    span {
      display: block;
      margin: 2px 2px;
      padding: 4px 10px;
      background: #898989;
      cursor: pointer;
      font-size: 12px;
      color: white;
    }
  </style>
  <script src="jquery-1.3.2.min.js"></script>
  <script>
    $(function () {
      $("#add").click(function () {//单个添加
        var $options = $("#select1 option:selected");
        $options.appendTo("#select2");
      });
      $("#add_all").click(function () {//全部添加
        $("#select1 option").each(function () {
          $(this).appendTo("#select2");
          /*
          也可以写为:
          var p=$("#select1 option");
          p.appendTo("#select2");
          */
        });
      });
      $("#remove").click(function () {//同上,只不过方向相反
        var $options = $("#select2 option:selected");
        // var $remove = $options.remove();
        $options.appendTo("#select1");
      });
      $("#remove_all").click(function () {//同上,只不过方向相反
        var p = $("#select2 option");
        p.appendTo("#select1");
      });
    });
    
  </script>
</head>
<body>
  <div class="centent">
    <select 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>
    </select>

    <div>
      <span id="add">选中添加到右边>></span>
      <span id="add_all">全部添加到右边>;></span>
    </div>
  </div>
  <div class="centent">
    <select multiple id="select2" style="width:100px;height:160px"></select>

    <div>
      <span id="remove"><<选中删除到左边</span>
      <span id="remove_all"><<全部删除到左边</span>
    </div>
  </div>
</body>
</html>

以上这篇jquery实现下拉框功能效果【实例代码】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Web版彷 Visual Studio 2003 颜色选择器
Jan 09 Javascript
JS拖动技术 关于setCapture使用
Dec 09 Javascript
onclick与listeners的执行先后问题详细解剖
Jan 07 Javascript
js函数中onmousedown和onclick的区别和联系探讨
May 19 Javascript
js中Math之random,round,ceil,floor的用法总结
Dec 26 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
Dec 19 Javascript
JS简单获取日期相差天数的方法
Apr 24 Javascript
vue.js实现价格格式化的方法
May 23 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
May 08 Javascript
微信小程序框架wepy之动态控制类名
Sep 14 Javascript
vue-cli3单页构建大型项目方案
Apr 07 Javascript
js实现带有动画的返回顶部
Aug 09 Javascript
浅析在javascript中创建对象的各种模式
May 06 #Javascript
jquery自定义插件——window的实现【示例代码】
May 06 #Javascript
javascript创建对象的几种模式介绍
May 06 #Javascript
前端性能优化及技巧
May 06 #Javascript
jquery自定义插件开发之window的实现过程
May 06 #Javascript
快速使用Bootstrap搭建传送带
May 06 #Javascript
BootStrap响应式导航条实例介绍
May 06 #Javascript
You might like
迅雷下载《中学科技》怀旧期刊下载
2021/02/27 无线电
写一个用户在线显示的程序
2006/10/09 PHP
坏狼php学习 计数器实例代码
2008/06/15 PHP
PHP以及MYSQL日期比较方法
2012/11/29 PHP
ThinkPHP中url隐藏入口文件后接收alipay传值的方法
2014/12/09 PHP
php7安装mongoDB扩展的方法分析
2017/08/02 PHP
Laravel项目中timeAgo字段语言转换的改善方法示例
2019/09/16 PHP
IE中jscript/javascript的条件编译
2006/09/07 Javascript
javascript 类型判断代码分析
2010/03/28 Javascript
Jquery ui css framework
2010/06/28 Javascript
java与javascript之间json格式数据互转介绍
2013/10/29 Javascript
jquery的总体架构分析及实现示例详解
2014/11/08 Javascript
JS基于面向对象实现的放烟花效果
2015/05/07 Javascript
简述Jquery与DOM对象
2015/07/10 Javascript
20分钟轻松创建自己的Bootstrap站点
2016/05/12 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
2016/06/22 Javascript
JS双击变input框批量修改内容
2016/12/12 Javascript
AngulaJS路由 ui-router 传参实例
2017/04/28 Javascript
微信小程序通过保存图片分享到朋友圈功能
2018/05/24 Javascript
Vue实现类似Spring官网图片滑动效果方法
2019/03/01 Javascript
[01:08:09]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第二局
2016/03/02 DOTA
Python 元组(Tuple)操作详解
2014/03/11 Python
python中字符串内置函数的用法总结
2018/09/13 Python
使用python进行波形及频谱绘制的方法
2019/06/17 Python
Python中的self用法详解
2019/08/06 Python
python3 字符串知识点学习笔记
2020/02/08 Python
Python virtualenv虚拟环境实现过程解析
2020/04/18 Python
解决tensorflow/keras时出现数组维度不匹配问题
2020/06/29 Python
pytorch随机采样操作SubsetRandomSampler()
2020/07/07 Python
基于python图书馆管理系统设计实例详解
2020/08/05 Python
柯基袜:Corgi Socks
2017/01/26 全球购物
全球领先的美容用品专卖店:Beauty Plus Salon
2018/09/04 全球购物
大学生职业生涯规划书参考模板
2014/03/05 职场文书
学生检讨书范文
2015/01/27 职场文书
Python使用PyYAML库读写yaml文件的方法
2022/04/06 Python
macos系统如何实现微信双开? mac登录两个微信以上微信的技巧
2022/07/23 数码科技