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 相关文章推荐
js String对象中常用方法小结(字符串操作)
Jan 27 Javascript
JS中Iframe之间传值的方法
Mar 11 Javascript
jquery中选择块并改变属性值的方法
Jul 31 Javascript
json数据的列循环示例
Sep 06 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
Jan 14 Javascript
jQuery实现向下滑出的二级菜单效果实例
Aug 22 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
May 14 Javascript
vue登录注册及token验证实现代码
Dec 14 Javascript
vue.js的computed,filter,get,set的用法及区别详解
Mar 08 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
Aug 07 Javascript
谈谈JavaScript中的函数
Sep 08 Javascript
vue中实现弹出层动画效果的示例代码
Sep 25 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 ? EasyUI DataGrid 资料存的方式介绍
2012/11/07 PHP
php htmlentities()函数的定义和用法
2016/05/13 PHP
PHP简单预防sql注入的方法
2016/09/27 PHP
PHP7多线程搭建教程
2017/04/21 PHP
laravel实现按时间日期进行分组统计方法示例
2019/03/23 PHP
PHP加MySQL消息队列深入理解
2021/02/27 PHP
js 鼠标拖动对象 可让任何div实现拖动效果
2009/11/09 Javascript
bootstrap data与jquery .data
2014/07/07 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
2016/03/22 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
2016/06/17 Javascript
值得分享的JavaScript实现图片轮播组件
2016/11/21 Javascript
javascript 面向对象function详解及实例代码
2017/02/28 Javascript
使用socket.io制做简易WEB聊天室
2018/01/02 Javascript
基于three.js编写的一个项目类示例代码
2018/01/05 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
2018/04/28 Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
2018/07/31 Javascript
WebSocket的简单介绍及应用
2019/05/23 Javascript
深入了解响应式React Native Echarts组件
2019/05/29 Javascript
[00:48]食人魔魔法师至宝“金鹏之幸”全新模型和自定义特效展示
2019/12/19 DOTA
Python实现扫描局域网活动ip(扫描在线电脑)
2015/04/28 Python
详谈Numpy中数组重塑、合并与拆分方法
2018/04/17 Python
下载python中Crypto库报错:ModuleNotFoundError: No module named ‘Crypto’的解决
2018/04/23 Python
利用pyinstaller将py文件打包为exe的方法
2018/05/14 Python
python画折线图的程序
2018/07/26 Python
QML实现钟表效果
2020/06/02 Python
opencv 实现特定颜色线条提取与定位操作
2020/06/02 Python
英国复古和经典球衣网站:Vintage Football Shirts
2018/10/05 全球购物
介绍一下sql server的安全性
2014/08/10 面试题
工程师岗位职责
2013/11/08 职场文书
销售人员求职的自我评价分享
2014/03/15 职场文书
教师职业道德事迹材料
2014/08/18 职场文书
党员个人剖析材料(四风问题)
2014/10/07 职场文书
简历自我评价优缺点
2015/03/11 职场文书
历史博物馆观后感
2015/06/05 职场文书
JavaScript如何利用Promise控制并发请求个数
2021/05/14 Javascript
JavaScript模拟实现网易云轮播效果
2022/04/04 Javascript