编程 Javascript

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实现下拉框左右移动（全部移动，已选移动）

- Author -

ylbtech

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

基于jquery的lazy loader插件实现图片的延迟加载[简单使用]

May 07 Javascript

JavaScript验证图片类型(扩展名)的函数分享

May 05 Javascript

使用JS实现jQuery的addClass, removeClass, hasClass函数功能

Oct 31 Javascript

JavaScript对HTML DOM使用EventListener进行操作

Oct 21 Javascript

jQuery Tree Multiselect使用详解

May 02 jQuery

vue之数据交互实例代码

Jun 20 Javascript

webpack构建vue项目的详细教程（配置篇）

Jul 17 Javascript

Angular2+国际化方案（ngx-translate）的示例代码

Aug 23 Javascript

javascript 判断用户有没有操作页面

Oct 17 Javascript

Vue2.5学习笔记之如何在项目中使用和配置Vue

Sep 26 Javascript

vuex存值与取值的实例

Nov 06 Javascript

mpvue微信小程序开发之实现一个弹幕评论

Nov 24 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