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与flash交互通信基础教程
Aug 07 Javascript
JavaScript 闭包深入理解(closure)
May 27 Javascript
javascript在事件监听方面的兼容性小结
Apr 07 Javascript
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
Feb 07 Javascript
javascript获取元素CSS样式代码示例
Nov 28 Javascript
易操作的jQuery表单提示插件
Dec 01 Javascript
微信小程序动态显示项目倒计时效果
Jun 13 Javascript
vue元素实现动画过渡效果
Jul 01 Javascript
JavaScript函数中的this四种绑定形式
Aug 15 Javascript
在Vue中使用Compass的方法
Mar 02 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
May 08 Javascript
JavaScript Blob对象原理及用法详解
Oct 14 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屏蔽蜘蛛访问代码及常用搜索引擎的HTTP_USER_AGENT
2013/03/06 PHP
PHP中数据库单例模式的实现代码分享
2014/08/21 PHP
AES加解密在php接口请求过程中的应用示例
2016/10/26 PHP
如何在PHP中使用数组
2020/06/09 PHP
php实现简单四则运算器
2020/11/29 PHP
从零开始学习jQuery (八) 插播:jQuery实施方案
2011/02/23 Javascript
JavaScript定时器详解及实例
2013/08/01 Javascript
原生js操作checkbox用document.getElementById实现
2013/10/12 Javascript
JavaScript中获取鼠标位置相关属性总结
2014/10/11 Javascript
基于jQuery实现表单提交验证
2014/11/24 Javascript
node.js中的path.normalize方法使用说明
2014/12/08 Javascript
jQuery实现视频作为全屏幕背景
2014/12/18 Javascript
jQuery中hide()方法用法实例
2014/12/24 Javascript
Javascript核心读书有感之词法结构
2015/02/01 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
2015/02/16 Javascript
javascript中this的四种用法
2015/05/11 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
2015/08/21 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
2015/12/04 Javascript
详解JS中的快速排序与冒泡
2017/01/10 Javascript
JavaScript简单计算人的年龄示例
2017/04/15 Javascript
Javascript 一些需要注意的细节(必看篇)
2017/07/08 Javascript
nodejs实现解析xml字符串为对象的方法示例
2018/03/14 NodeJs
解决layui中table异步数据请求不支持自定义返回数据格式的问题
2018/08/19 Javascript
javascript json字符串到json对象转义问题
2019/01/22 Javascript
javascript实现倒计时效果
2020/02/17 Javascript
Python只用40行代码编写的计算器实例
2017/05/10 Python
如何基于python测量代码运行时间
2019/12/25 Python
Python 将 QQ 好友头像生成祝福语的实现代码
2020/05/03 Python
Django怎么在admin后台注册数据库表
2020/11/14 Python
HTML5+CSS3:3D展示商品信息示例
2017/01/03 HTML / CSS
销售员个人求职的自我评价
2014/02/10 职场文书
大学生先进事迹材料
2014/02/16 职场文书
500字小学生检讨书
2015/02/19 职场文书
苦儿流浪记读书笔记
2015/07/01 职场文书
教你快速开启Apache SkyWalking的自监控
2021/04/25 Servers
springboot应用服务启动事件的监听实现
2022/04/06 Java/Android