zoukankan html css js c++ java

JQuery MultiSelect（左右选择框）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>demo</title>
    <script src="jquery-1.4.4.min.js"></script>
    <script>
    $(function(){
        //选择一项
        $("#addOne").click(function(){
            $("#from option:selected").clone().appendTo("#to");
            $("#from option:selected").remove();
        });
 
        //选择全部
        $("#addAll").click(function(){
            $("#from option").clone().appendTo("#to");
            $("#from option").remove();
        });
 
        //移除一项
        $("#removeOne").click(function(){
            $("#to option:selected").clone().appendTo("#from");
            $("#to option:selected").remove();
        });
 
        //移除全部
        $("#removeAll").click(function(){
            $("#to option").clone().appendTo("#from");
            $("#to option").remove();
        });
 
        //移至顶部
        $("#Top").click(function(){
            var allOpts = $("#to option");
            var selected = $("#to option:selected");
 
            if(selected.get(0).index!=0){
                for(i=0;i<selected.length;i++){
                   var item = $(selected.get(i));
                   var top = $(allOpts.get(0));
                   item.insertBefore(top);
                }
            }
        });
 
        //上移一行
        $("#Up").click(function(){
            var selected = $("#to option:selected");
            if(selected.get(0).index!=0){
                selected.each(function(){
                    $(this).prev().before($(this));
                });
            }
        });
 
        //下移一行
        $("#Down").click(function(){
            var allOpts = $("#to option");
            var selected = $("#to option:selected");
 
            if(selected.get(selected.length-1).index!=allOpts.length-1){
                for(i=selected.length-1;i>=0;i--){
                   var item = $(selected.get(i));
                   item.insertAfter(item.next());
                }
            }
        });
 
        //移至底部
        $("#Buttom").click(function(){
            var allOpts = $("#to option");
            var selected = $("#to option:selected");
 
            if(selected.get(selected.length-1).index!=allOpts.length-1){
                for(i=selected.length-1;i>=0;i--){
                   var item = $(selected.get(i));
                   var buttom = $(allOpts.get(length-1));
                   item.insertAfter(buttom);
                }
            }
        });
    });
    </script>
  </head>
<body>
<table align="center" width="288" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="4">
            <select name="from" id="from" multiple="multiple" size="10" style="100%">
                <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>
        </td>
        <td align="center">
            <input type="button" id="addAll" value=" >> " style="50px;" /><br />
            <input type="button" id="addOne" value=" > " style="50px;" /><br />
            <input type="button" id="removeOne" value="&lt;" style="50px;" /><br />
            <input type="button" id="removeAll" value="&lt;&lt;" style="50px;" /><br />
        </td>
        <td colspan="4">
            <select name="to" id="to" multiple="multiple" size="10" style="100%">
            </select>
        </td>
        <td align="center">
            <input type="button" id="Top" value="置顶" style="50px;" /><br />
            <input type="button" id="Up" value="上移" style="50px;" /><br />
            <input type="button" id="Down" value="下移" style="50px;" /><br />
            <input type="button" id="Buttom" value="置底" style="50px;" /><br />
        </td>
    </tr>
</table>
</body>
</html>

查看全文

相关阅读:
hudson中 ANT 编译警告：编码 UTF-8 的不可映射字符解决方法
 Jmeter与hudson，ant集成
 Hudson配置路径
 python 面向对象：封装---对象的属性可以是另一个类创建的对象
 python 面向对象：封装
 python3 f-string格式化字符串的高级用法
 iOS微信支付无法直接返回APP的问题
 学习git&github
Appium之xpath定位详解
 selenium等待方式详解

原文地址：https://www.cnblogs.com/iteakey/p/4171640.html