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 相关文章推荐
拖动table标题实现改变td的大小(css+js代码)
Apr 16 Javascript
JavaScript中对象property的读取和写入方法介绍
Dec 30 Javascript
jquery实现多条件筛选特效代码分享
Aug 28 Javascript
Node.js的环境安装配置(使用nvm方式)
Oct 11 Javascript
Canvas实现放射线动画效果
Feb 15 Javascript
js自定义Tab选项卡效果
Jun 05 Javascript
iscroll动态加载数据完美解决方法
Jul 18 Javascript
bootstrap table表格客户端分页实例
Aug 07 Javascript
EL表达式截取字符串的函数说明
Sep 22 Javascript
从vue源码解析Vue.set()和this.$set()
Aug 30 Javascript
详解jquery和vue对比
Apr 16 jQuery
Node.js API详解之 dgram模块用法实例分析
Jun 05 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
有关phpmailer的详细介绍及使用方法
2013/01/28 PHP
ie与session丢失(新窗口cookie丢失)实测及解决方案
2013/07/15 PHP
yii2控制器Controller Ajax操作示例
2016/07/23 PHP
脚本之家贴图转换+转贴工具用到的js代码超级推荐
2007/04/05 Javascript
jQuery 解析xml文件
2009/08/09 Javascript
javascript设置金额样式转换保留两位小数示例代码
2013/12/04 Javascript
js控制文本框只输入数字和小数点的方法
2015/03/10 Javascript
JS模拟键盘打字效果的方法
2015/08/05 Javascript
javascript回到顶部特效
2016/07/30 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
2016/10/14 Javascript
Bootstrap基本插件学习笔记之按钮(21)
2016/12/08 Javascript
Vue组件开发初探
2017/02/14 Javascript
Bootstrap3 多个模态对话框无法显示的解决方案
2017/02/23 Javascript
JavaScript实现一个简易的计算器实例代码
2018/05/10 Javascript
解决vue props 拿不到值的问题
2018/09/11 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
2020/09/02 Javascript
在Windows8上的搭建Python和Django环境
2014/07/03 Python
整理Python最基本的操作字典的方法
2015/04/24 Python
Python中import机制详解
2017/11/14 Python
Python解析、提取url关键字的实例详解
2018/12/17 Python
Python多进程写入同一文件的方法
2019/01/14 Python
python+openCV利用摄像头实现人员活动检测
2019/06/22 Python
解决Django中多条件查询的问题
2019/07/18 Python
pytorch 自定义参数不更新方式
2020/01/06 Python
Django中使用Json返回数据的实现方法
2020/06/03 Python
在HTML5 canvas里用卷积核进行图像处理的方法
2018/05/02 HTML / CSS
Paper Cape官网:美国婴儿和儿童服装品牌
2019/11/02 全球购物
药学专业大专生的自我评价
2013/12/12 职场文书
文艺晚会策划方案
2014/06/11 职场文书
2014年班级工作总结
2014/11/14 职场文书
秋季运动会开幕词
2015/01/28 职场文书
党委工作总结2015
2015/04/27 职场文书
大学生,三分钟即兴演讲稿
2019/07/22 职场文书
vue2实现provide inject传递响应式
2021/05/21 Vue.js
微信小程序实现聊天室功能
2021/06/14 Javascript
世界各国短波电台对东亚播送时间频率表(SW)
2021/06/28 无线电