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 相关文章推荐
js继承的实现代码
Aug 05 Javascript
利用谷歌地图API获取点与点的距离的js代码
Oct 11 Javascript
用html+css+js实现的一个简单的图片切换特效
May 28 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
Jan 26 Javascript
Javascript实现代码折叠功能
Aug 25 Javascript
jquery删除数组中重复元素
Dec 05 Javascript
canvas绘制七巧板
Feb 03 Javascript
js实现产品缩略图效果
Mar 10 Javascript
Vue axios 中提交表单数据(含上传文件)
Jul 06 Javascript
js禁止Backspace键使浏览器后退的实现方法
Sep 01 Javascript
3种vue组件的书写形式
Nov 29 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
Sep 14 Javascript
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世纪万年历
2006/12/06 PHP
PHP之短标签开启设置
2013/06/17 PHP
关于PHP模板Smarty的初级使用方法以及心得分享
2013/06/21 PHP
Php header()函数语法及使用代码
2013/11/04 PHP
PHP实现的随机IP函数【国内IP段】
2016/07/20 PHP
thinkphp 字母函数详解T/I/N/D/M/A/R/U
2017/04/03 PHP
js预载入和JavaScript Image()对象使用介绍
2011/08/28 Javascript
JS中操作JSON总结
2020/12/06 Javascript
改变状态栏文字的js代码
2014/06/13 Javascript
Jquery中扩展方法extend使用技巧
2014/08/24 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
2014/10/22 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
2015/11/23 Javascript
JavaScript+html5 canvas实现本地截图教程
2020/04/16 Javascript
浅析jQuery 3.0中的Data
2016/06/14 Javascript
jquery+ajax实现省市区三级联动效果简单示例
2017/01/04 Javascript
vue.js指令和组件详细介绍及实例
2017/04/06 Javascript
JS中去掉array中重复元素的方法
2017/05/26 Javascript
Angular2+如何去除url中的#号详解
2017/12/20 Javascript
vue生命周期的探索
2019/04/03 Javascript
使用异步组件优化Vue应用程序的性能
2019/04/28 Javascript
JavaScript实现栈结构Stack过程详解
2020/03/07 Javascript
JavaScript隐式类型转换代码实例
2020/05/29 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
2020/09/02 Javascript
Webpack的Loader和Plugin的区别
2020/11/09 Javascript
OpenCV图像颜色反转算法详解
2019/05/13 Python
python 两个数据库postgresql对比
2019/10/21 Python
tensorflow模型继续训练 fineturn实例
2020/01/21 Python
记录一下scrapy中settings的一些配置小结
2020/09/28 Python
应聘医药代表职位求职信
2013/10/21 职场文书
卫校护理专业毕业生求职信
2013/11/26 职场文书
入党积极分子自我鉴定范文
2014/03/25 职场文书
实习评语大全
2014/04/26 职场文书
学校端午节活动方案
2014/08/23 职场文书
工作检讨书怎么写
2014/10/10 职场文书
新员工实习期个人工作总结
2015/10/15 职场文书
SpringMVC 整合SSM框架详解
2021/08/30 Java/Android