zoukankan      html  css  js  c++  java
  • Jquery 组 表单select交互选项


    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
    <meta charset="utf-8">
    <title></title>
    <style>

    .centent{
    float:left;
    margin-right: 50px;
    }
    </style>
    </head>
    <body>
    <div class="centent">
    <select multiple id="select1" style=" 100px;height:160px ">
    <option value="1">选项1</option>
    <option value="2">选项2</option>
    <option value="3">选项3</option>
    <option value="4">选项4</option>
    <option value="5">选项5</option>
    <option value="6">选项6</option>
    <option value="7">选项7</option>
    </select>
    <div>
    <p id="add">选中添加到右边&gt;&gt;</p>
    <p id="add_all">全部添加到右边&gt;&gt;</p>
    </div>
    </div>
    <div class="centent">
    <select multiple id="select2" style=" 100px;height:160px ">
    </select>
    <div>
    <p id="remove">&lt;&lt;选中删除到左边</p>
    <p id="remove_all">&lt;&lt;全部删除到左边</p>
    </div>
    </div>
    </body>
    <script src="js/jquery-1.11.3.js"></script>
    <script>
    $('#add').click(function(){
    var $options=$('#select1 option:selected');
    $options.appendTo('#select2');
    });
    $('#add_all').click(function(){
    var $options=$('#select1 option');
    $options.appendTo('#select2');
    });
    $('#select1').dblclick(function(){
    var $options=$("option:selected",this);
    $options.appendTo('#select2');
    });
    $('#remove').click(function(){
    var $options=$('#select2 option:selected');
    $options.appendTo('#select1');
    });
    $('#remove_all').click(function(){
    var $options=$('#select2 option');
    $options.appendTo('#select1');
    });
    $('#select2').dblclick(function(){
    var $options=$("option:selected",this);
    $options.appendTo('#select1');
    });
    </script>
    </html>
  • 相关阅读:
    作业3.14下
    作业3.14上
    作业3.13 下
    作业 3.13上
    2017.3.10上午
    2017.3.9上午
    2017.3.23-morning
    2017.3.22-morning
    2017.3.21-afternoon
    2017.3.21-morning
  • 原文地址:https://www.cnblogs.com/dianzan/p/7367553.html
Copyright © 2011-2022 走看看