<head>

    <title>

    </title>

    <!--Standard jQuery -->

    <script type="text/javascript" src="https://code.jquery.com/jquery-git2.js" charset="utf-8"></script>

    <script type="text/javascript">

        $(document).ready(function()

        {

            $('#boxClear').click(function(){

                $('#firstFilterSearch').val('');

            });

            $('#firstFilterSearch').keyup(function()

            {

                var searchArea = $('#firstList');

                searchFirstList($(this).val(), searchArea);

            });

            $('#firstList').dblclick(function() {

                assignList();

            });

            $('#secondList').dblclick(function() {

                unassignList();

            });

            $('#to2').click(function()

            {

                assignList();

            });

            $('#to1').click(function()

            {

                unassignList();

            });

        });

        // Function for Filtering

        function searchFirstList(inputVal, searchArea)

        {

            var allCells = $(searchArea).find('option');

            if(allCells.length > 0)

            {

                var found = false;

                allCells.each(function(index, option)

                {

                    var regExp = new RegExp(inputVal, 'i');

                    if(regExp.test($(option).text()))

                    {

                        $(option).show();

                    }

                    else

                    {

                        $(option).hide();

                    }

                });

            }

        }

        // function: UnAssignment

        function assignList()

        {

            $('#firstList :selected').each(function(i, selected){

                // append to second list box

                $('#secondList').append('<option value="'+selected.value+'">'+ selected.text+'</option>');

                // remove from first list box

                $("#firstList option[value='"+ selected.value +"']").remove();

            });

        }

        // function: UnAssignment

        function unassignList()

        {

            $('#secondList :selected').each(function(i, selected){

                // append to first list box

                $('#firstList').append('<option value="'+selected.value+'">'+ selected.text+'</option>');

                // remove from second list box

                $("#secondList option[value='"+ selected.value +"']").remove();

            });

        }

    </script>

</head>

<body>

<table border="0" cellpadding="0" cellspacing="0" width="100%">

    <tr>

        <td width="100%">

            <form id="frm_format" method="" action="">

            <table cellpadding="0" id="tbl_format"cellspacing="0" border="0" width="100%" class="standard_table_v4">

                <thead>

                </thead>

                <tbody>

                    <tr>

                        <td>

                        <td align="center">

                            Filter: <input id="firstFilterSearch" type="text">

                                    <input type="button" id="boxClear" name="boxClear" value="Cancel"><br>

                            <select id="firstList" multiple="multiple" style="height:420px;width: 250px;" >

                                <option value="1">PHP</option>

                                <option value="2">.Net</option>

                                <option value="3">Copy</option>

                                <option value="4">Paste</option>

                                <option value="5">Pea</option>

                                <option value="6">Pamp</option>

                                <option value="7">ladaku</option>

                                <option value="8">Zebra</option>

                            </select>

                        </td>

                        <td align="center">

                            <input id="to2" type="button" name="to2"  title='assign' value=">" /><br/><br/>

                            <input id="to1" type="button" name="to1" title='unassign' value="<">

                        </td>

                        <td>

                            <select id="secondList" multiple="multiple" style="height:420px;width: 250px;" >

                            </select>

                        </td>

                    </tr>

                </tbody>

            </table>

            </form>

        </td>

    </tr>

</table>

</body>

</html>

实现两个select list box间item的移动和过滤的更多相关文章

  1. jQuery获取Radio选择的Value值||两个select之间option的互相添加操作(jquery实现)

    jQuery获取Radio选择的Value值: 1. $("input[name='radio_name'][checked]").val();  //选择被选中Radio的Val ...

  2. JSF 2 multiple select dropdown box example

    In JSF, <h:selectManyMenu /> tag is used to render a multiple select dropdown box – HTML selec ...

  3. oracle中，将两个select语句的结果作为一个整体显示出来

    如果我们需要将两个select语句的结果作为一个整体显示出来,我们就需要用到union或者union all关键字.union(或称为联合)的作用是将多个结果合并在一起显示出来.union和union ...

  4. 2017 年 9 月 27 日 js(1.两个select 内容互换 2.单选按钮 同意可点击下一步 3. 全选框)

    1.两个select 内容互换 <!DOCTYPE html><html>    <head>        <meta charset="UTF- ...

  5. Mysql中两个select语句的连接

    Mysql中两个select语句连接需要用到操作符 SQL UNION 操作符 UNION 操作符用于合并两个或多个 SELECT 语句的结果集. 请注意,UNION 内部的 SELECT 语句必须拥 ...

  6. 两个Select 之间的值的传递

    运行效果: 下面是代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML ...

  7. 左右两个Select列表框交换数据的JS

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD ...

  8. SQL语句里合并两个select查询结果

    SQL UNION 操作符UNION 操作符用于合并两个或多个 SELECT 语句的结果集. 请注意,UNION 内部的 SELECT 语句必须拥有相同数量的列.列也必须拥有相似的数据类型.同时,每条 ...

  9. jQuery：实现两个<select>控件的互移操作

    一.直接上代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...

随机推荐

  1. 转化json

    /// <summary> /// 转换成JSON字符串 /// </summary> /// <param name="jsonObject"> ...

  2. java之package与import

    我就以package与import开始吧. package的作用其实就是c++的namespace的作用,防止名字相同的类产生冲突,只是实现的机制不一样,java编译器在编译时,直接根据package ...

  3. Unity-资源

    模型.材质.动画 Unity的默认系统单位为"米" 三维软件 三维软件内部米制尺寸/m 默认设置导入Unity中的尺寸/m 与Unity单位的比例关系 Maya 1 100 1:1 ...

  4. 身份证校验程序（上）- 零基础入门学习Delphi48

    身份证校验程序 让编程改变世界 Change the world by program [caption id="attachment_2699" align="alig ...

  5. 分析java 嵌套类与内部类

    一.什么是嵌套类及内部类?     可以在一个类的内部定义另一个类,这种类称为嵌套类(nested classes),它有两种类型:静态嵌套类和非静态嵌套类.静态嵌套类使用很少,最重要的是非静态嵌套类 ...

  6. spring3.0事务的配置

    第一种配置方法:基于XML的事务管理 这种方法不需要对原有的业务做任何修改,通过在XML文件中定义需要拦截方法的匹配即可完成配置,要求是,业务处理中的方法的命名要有规律,比如setXxx,xxxUpd ...

  7. 【转】如何检测wifi信号强度？ -- 不错

    原文网址:http://jingyan.baidu.com/article/90895e0fe9616164ec6b0b88.html 当我们在使用wifi上网时,在某些角落会出现无wifi信号,或是 ...

  8. 2014元旦第1周三新的尝试&爬山丢失望远镜

    2014元旦在早起中开始,起来后看了<逃出你的肖申克>系列文章,没有精度只是选择了里面的关键语句和方法论,没有多少意外的收获.然后看了些java系列文章,关于jvm参数配置.运行监控及性能 ...

  9. 在Linux CentOS 6.5 (Final)上安装git-1.9.0

    CentOS 6.5 (Final)默认安装的git版本为1.7.1.3,而我们希望安装1.9.0版本.由于rpm安装库里没有1.9.0版本,因此我们需要找其它方法来安装. 网上有很多文章介绍了如何从 ...

  10. UESTC_Can You Help God Wu CDOJ 582

    There is a boy named God Wu in UESTC ACM team. One day he is asked to finish a task. The task is tha ...