jQuery实现下拉框左右移动(全部移动,已选移动)


Posted in Javascript onApril 15, 2016

用到的方法为:appendTo()
格式:$(content).appendTo(selector)
appendTo() 方法在被选元素的结尾(仍然在内部)插入指定内容。
click() 方法触发 click 事件,或规定当发生 click 事件时运行的函数。

看一下具体实现的代码:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
      $("#add").click(function () {
      //1,方式一
//        var $option = $("#select1 option:selected");  //获取选中的选项
//        var $remove = $option.remove(); //删除下拉列表中选中的选项
//        $remove.appendTo("#select2");  //追加给对方
        //2,方式二
        var $option = $("#select1 option:selected");  //获取选中的选项
        $option.appendTo("#select2");  //追加给对方
      });
      $("#add_all").click(function () {
        var $option = $("#select1 option");
        $option.appendTo("#select2");
      });
      $("#remove").click(function () {
        var $option = $("#select2 option:selected");
        $option.appendTo("#select1");
      });
      $("#remove_all").click(function () {
        var $option = $("#select2 option");
        $option.appendTo("#select1");
      });
    });
  </script>
</head>
<body>
<h3>下拉框应用</h3>
  <table>
    <tr>
      <td>
        <select id="select1" multiple="multiple" style="width:100px;">
          <option value="News">News</option>
          <option value="Sport">Sport</option>
          <option value="Education">Education</option>
          <option value="Technology">Technology</option>
          <option value="Art">Art</option>
        </select>
      </td>
      <td>
        <button id="add">
          >|</button><br />
        <button id="add_all">
          >></button><br />
        <button id="remove_all">
          <<</button><br />
        <button id="remove">
          |<</button>
      </td>
      <td>
        <select id="select2" multiple="multiple" style="width:100px;">
        </select>
      </td>
    </tr>
  </table>
</body>
</html>

运行效果:

jQuery实现下拉框左右移动(全部移动,已选移动)

Javascript 相关文章推荐
Ext面向对象开发实践(续)
Nov 18 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
Jan 11 Javascript
使用jquery自定义鼠标样式满足个性需求
Nov 05 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
Jun 03 Javascript
javascript中Number的方法小结
Nov 21 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
Nov 28 Javascript
vue监听input标签的value值方法
Aug 27 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
Apr 04 Javascript
layui--select使用以及下拉框实现键盘选择的例子
Sep 24 Javascript
Vue的click事件防抖和节流处理详解
Nov 13 Javascript
node.js 微信开发之定时获取access_token
Feb 07 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
jQuery调用WebMethod(PageMethod) NET2.0的方法
Apr 15 #Javascript
jQuery解决浏览器兼容性问题案例分析
Apr 15 #Javascript
jQuery使用cookie与json简单实现购物车功能
Apr 15 #Javascript
在Html中使用Requirejs进行模块化开发实例详解
Apr 15 #Javascript
jQuery基于json与cookie实现购物车的方法
Apr 15 #Javascript
Window.Open打开窗体和if嵌套代码
Apr 15 #Javascript
jQuery设置Cookie及删除Cookie实例分析
Apr 15 #Javascript
You might like
php 验证码制作(网树注释思想)
2009/07/20 PHP
php中DOMDocument简单用法示例代码(XML创建、添加、删除、修改)
2010/12/19 PHP
phpmyadmin打开很慢的解决方法
2014/04/21 PHP
php实例分享之html转为rtf格式
2014/06/02 PHP
php限制文件下载速度的代码
2015/10/20 PHP
PHP使用new StdClass()创建空对象的方法分析
2017/06/06 PHP
PHP attributes()函数讲解
2019/02/03 PHP
javascript学习笔记(十) js对象 继承
2012/06/19 Javascript
判断javascript的数据类型(示例代码)
2013/12/11 Javascript
jQuery+jRange实现滑动选取数值范围特效
2015/03/14 Javascript
使用伪命名空间封装保护独自创建的对象方法
2016/08/04 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
2016/11/11 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
2017/02/09 Javascript
基于Axios 常用的请求方法别名(详解)
2018/03/13 Javascript
使用apifm-wxapi模块中的问题及解决方法
2019/08/05 Javascript
手写Vue弹窗Modal的实现代码
2019/09/11 Javascript
javascript绘制简单钟表效果
2020/04/07 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
2020/09/08 Javascript
JavaScript实现网页下拉菜单效果
2020/11/20 Javascript
2款Python内存检测工具介绍和使用方法
2014/06/01 Python
python查询mysql中文乱码问题
2014/11/09 Python
Python的Scrapy爬虫框架简单学习笔记
2016/01/20 Python
Python自动化开发学习之三级菜单制作
2017/07/14 Python
mac下如何将python2.7改为python3
2018/07/13 Python
Python中字符串String的基本内置函数与过滤字符模块函数的基本用法
2019/05/27 Python
python自动化工具之pywinauto实例详解
2019/08/26 Python
用60行代码实现Python自动抢微信红包
2021/02/04 Python
欧迪办公美国官网:Office Depot
2016/08/22 全球购物
公务员综合考察材料
2014/02/01 职场文书
《太阳》教学反思
2014/02/21 职场文书
住院医师规范化培训实施方案
2014/06/12 职场文书
2014年公务员退休工资改革方案
2014/10/01 职场文书
加入学生会自荐书
2015/03/05 职场文书
钢铁是怎样炼成的读书笔记
2015/06/29 职场文书
2016新年问候语大全
2015/11/11 职场文书
python神经网络ResNet50模型
2022/05/06 Python