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 的应用开发初探(mootools)
Dec 19 Javascript
Jquery css函数用法(判断标签是否拥有某属性)
May 28 Javascript
jquery插件autocomplete用法示例
Jul 01 Javascript
微信小程序左右滑动切换页面详解及实例代码
Feb 28 Javascript
angularJS深拷贝详解
Mar 23 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
微信小程序仿微信运动步数排行(交互)
Jul 13 Javascript
node app 打包工具pkg的具体使用
Jan 17 Javascript
vue实现搜索功能
May 28 Javascript
javascript前端和后台进行数据交互方法示例
Aug 07 Javascript
vue实现下拉菜单树
Oct 22 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实现的下载css文件中的图片的代码
2010/02/08 PHP
PHP中调用C/C++制作的动态链接库的教程
2016/03/10 PHP
非常有用的9个PHP代码片段
2016/04/06 PHP
php实现xml与json之间的相互转换功能实例
2016/07/07 PHP
JavaScript 快捷键设置实现代码
2009/03/13 Javascript
js控制滚动条缓慢滚动到顶部实现代码
2013/03/20 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
2013/09/16 Javascript
在Linux上用forever实现Node.js项目自启动
2014/07/09 Javascript
JavaScript中Math.SQRT2属性的使用详解
2015/06/14 Javascript
js中跨域方法原理详解
2015/07/19 Javascript
两种JS实现屏蔽鼠标右键的方法
2020/08/20 Javascript
基于jQuery实现的QQ表情插件
2015/08/25 Javascript
Bootstrap Validator 表单验证
2016/07/25 Javascript
DropDownList实现可输入可选择(两种版本可选)
2016/12/07 Javascript
微信小程序Getuserinfo解决方案图解
2018/08/24 Javascript
微信小程序module.exports模块化操作实例浅析
2018/12/20 Javascript
Python程序设计入门(1)基本语法简介
2014/06/13 Python
在Django的URLconf中进行函数导入的方法
2015/07/18 Python
Python安装Numpy和matplotlib的方法(推荐)
2017/11/02 Python
Python3.7安装keras和TensorFlow的教程图解
2020/06/18 Python
浅析python标准库中的glob
2020/03/13 Python
Pandas直接读取sql脚本的方法
2021/01/21 Python
HTML5里的placeholder属性使用实例和美化显示效果的方法
2014/04/23 HTML / CSS
canvas 绘图时位置偏离的问题解决
2020/09/16 HTML / CSS
斯洛伐克香水和化妆品购物网站:Parfemy-Elnino.sk
2020/01/28 全球购物
机关道德讲堂实施方案
2014/03/15 职场文书
葛优非诚勿扰搞笑征婚台词
2014/03/17 职场文书
运动会拉拉队口号
2014/06/09 职场文书
2015学校年度工作总结
2015/05/11 职场文书
收入证明申请书
2015/06/12 职场文书
2015中秋祝酒词
2015/08/12 职场文书
大学迎新生的欢迎词
2019/06/25 职场文书
redis三种高可用方式部署的实现
2021/05/11 Redis
浅谈pytorch中stack和cat的及to_tensor的坑
2021/05/20 Python
详细谈谈MYSQL中的COLLATE是什么
2021/06/11 MySQL
MySQL创建管理HASH分区
2022/04/13 MySQL