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 相关文章推荐
javascript document.images实例
May 27 Javascript
JS 强制设为首页的代码
Jan 31 Javascript
JavaScript实现鼠标点击后层展开效果的方法
May 13 Javascript
jquery实现图片放大镜功能
Nov 23 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
Dec 04 Javascript
jQuery选择器用法实例详解
Dec 17 Javascript
Jquery操作cookie记住用户名
Mar 29 Javascript
Ajax的概述与实现过程
Nov 18 Javascript
angular json对象push到数组中的方法
Feb 27 Javascript
vue文件树组件使用详解
Mar 29 Javascript
JS中实现一个下载进度条及播放进度条的代码
Jun 10 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
Mar 23 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
php获取CSS文件中图片地址并下载到本地的方法
2014/12/02 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
2013/08/19 Javascript
浅析Js中的单引号与双引号问题
2013/11/06 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
2014/08/14 Javascript
jquery合并表格中相同文本的相邻单元格
2015/07/17 Javascript
如何用javascript计算文本框还能输入多少个字符
2015/07/29 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
2016/11/05 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
2017/01/13 Javascript
JS回调函数简单用法示例
2017/02/09 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
2017/02/18 Javascript
Vue中的vue-resource示例详解
2018/11/02 Javascript
如何实现小程序tab栏下划线动画效果
2019/05/18 Javascript
vue实现表格过滤功能
2019/09/27 Javascript
python实现指定文件夹下的指定文件移动到指定位置
2018/09/17 Python
Django CSRF跨站请求伪造防护过程解析
2019/07/31 Python
Django rest framework jwt的使用方法详解
2019/08/08 Python
python随机模块random使用方法详解
2020/02/14 Python
python如何变换环境
2020/07/21 Python
python爬虫---requests库的用法详解
2020/09/28 Python
10个最常见的HTML5面试题 附答案
2016/06/06 HTML / CSS
AmazeUI 等分网格的实现示例
2020/08/25 HTML / CSS
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2014/01/19 面试题
飞利信loadrunner和软件测试笔试题
2012/09/22 面试题
前厅收银主管岗位职责
2014/02/04 职场文书
大一学生职业生涯规划
2014/03/11 职场文书
《蝙蝠和雷达》教学反思
2014/04/23 职场文书
网络营销策划方案
2014/06/04 职场文书
房屋鉴定委托书范本
2014/09/23 职场文书
领导干部作风整顿个人剖析材料
2014/10/11 职场文书
旷课检讨书
2015/01/26 职场文书
再次探讨go实现无限 buffer 的 channel方法
2021/06/13 Golang
MySQL系列之十三 MySQL的复制
2021/07/02 MySQL
MySQL系列之四 SQL语法
2021/07/02 MySQL
Python Matplotlib绘制条形图的全过程
2021/10/24 Python
关于MybatisPlus配置双数据库驱动连接数据库问题
2022/01/22 Java/Android