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 相关文章推荐
javascript 图片上一张下一张链接效果代码
Mar 12 Javascript
jQuery EasyUI API 中文文档 可调整尺寸
Sep 29 Javascript
Moment.js 不容错过的超棒Javascript日期处理类库
Apr 15 Javascript
JQuery判断HTML元素是否存在的两种解决方法
Dec 26 Javascript
XML文件转化成NSData对象的方法
Aug 12 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
Jun 13 Javascript
js实现导航吸顶效果
Feb 24 Javascript
原生JS实现随机点名项目的实例代码
Apr 30 Javascript
jquery分页优化操作实例分析
Aug 23 jQuery
js键盘事件实现人物的行走
Jan 17 Javascript
移动端JS实现拖拽两种方法解析
Oct 12 Javascript
vue使用节流函数的踩坑实例指南
May 20 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
Zerg剧情介绍
2020/03/14 星际争霸
PHP使用CURL_MULTI实现多线程采集的例子
2014/07/29 PHP
jquery关于页面焦点的定位(文本框获取焦点时改变样式 )
2010/09/10 Javascript
Javascript改变CSS样式(局部和全局)
2013/12/18 Javascript
javascript 按键事件(兼容各浏览器)
2013/12/20 Javascript
javascript实现dom元素可拖动
2016/03/21 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
2016/10/05 Javascript
简单三步实现报表页面集成天气
2016/12/15 Javascript
jquery精度计算代码 jquery指定精确小数位
2017/02/06 Javascript
关于axios返回空对象的问题解决
2017/04/04 Javascript
javascript  数组排序与对象排序的实例
2017/07/17 Javascript
js防刷新的倒计时代码 js倒计时代码
2017/09/06 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
2018/04/27 jQuery
jQuery实现的简单对话框拖动功能示例
2018/06/05 jQuery
JavaScript中的Proxy对象
2020/11/27 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
2021/01/05 Vue.js
[01:06:39]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第三局
2016/03/02 DOTA
python网络编程学习笔记(九):数据库客户端 DB-API
2014/06/09 Python
python使用自定义user-agent抓取网页的方法
2015/04/15 Python
Python实现基于权重的随机数2种方法
2015/04/28 Python
python 循环遍历字典元素的简单方法
2016/09/11 Python
安装Python和pygame及相应的环境变量配置(图文教程)
2017/06/04 Python
超实用的 30 段 Python 案例
2019/10/10 Python
Python使用GitPython操作Git版本库的方法
2020/02/29 Python
Python自动重新加载模块详解(autoreload module)
2020/04/01 Python
基于K.image_data_format() == 'channels_first' 的理解
2020/06/29 Python
Python-openCV开运算实例
2020/07/05 Python
Python json解析库jsonpath原理及使用示例
2020/11/25 Python
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
2013/01/30 HTML / CSS
巴西宠物店在线:Geração Pet
2017/05/31 全球购物
添柏岚英国官方网站:Timberland英国
2019/11/28 全球购物
JMS中Topic和Queue有什么区别
2013/05/15 面试题
英语系本科生求职信
2014/07/15 职场文书
新生儿未入户证明
2015/06/23 职场文书
Tomcat用户管理的优化配置详解
2022/03/31 Servers
Java中API的使用方法详情
2022/04/06 Java/Android