<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. 安装完Oracle数据库，给scott账户解锁方法

    装完了Oracle 10g数据库,忘了给scott账户解锁.这时可以在sql plus工具里(开始|所有程序|<Oracle-Home>|应用程序开发|SQL Plus),也可以在控制台通 ...

  2. 原创：C sharp 中 Enum的几点小 Tips

    (1)为什么要使用Enum? ♥ enums枚举是值类型,数据直接存储在栈中,而不是使用引用和真实数据的隔离方式来存储.enum student{a,b,c,d,e},其中enum代表student为 ...

  3. Visual Studio .NET、.NET Framework和C#之间的联系

    Visual Studio .NET是一种集成开发环境(IDE),它包含3种高级程序设计语言,C#就是其中的一种:Visual Studio .NET之所以能把这三种语言有机结合起来并具有与平台无关的 ...

  4. hibernate中.hbm.xml和注解方式自动生成数据表的简单实例(由新手小白编写，仅适用新手小白)

    绝逼新手小白,so 请大神指点! 如果真的错的太多,错的太离谱,错的误导了其他小伙伴,还望大神请勿喷,大神请担待,大神请高抬贵嘴......谢谢. 好了,正题 刚接触ssh,今天在搞使用.hbm.xm ...

  5. OFBiz应用https与http方式访问切换

    url.properties port.https.enabled=N port.https=8444 force.https.host=

  6. 让操作javascript对象数组像.net lamda表达式一样

    让操作javascript对象数组像.net lamda表达式一样 随着web应用程序的富客户端化.ajax的广泛使用及复杂的前端业务逻辑.对js对象数组.json数组的各种操作越来越多.越来越复杂. ...

  7. JS--switch 语句

    说明:js中switch语句的语法风格 function convert(x){ switch(x) { case "string": document.write("s ...

  8. 编译安装httpd

    一.安装前的说明: httpd依赖于apr和apr-util所以在安装httpd之前要把这些东西都安装上去. 事先安装的依赖: yum -y install gcc gcc-c++ pcre-deve ...

  9. C++之------回调函数

    一:What?(什么是回调函数) 回调函数图文讲解 谓回调,就是客户程序C调用服务程序S中的某个函数A,然后S又在某个时候反过来调用C中的某个函数B,对于C来说,这个B便叫做回调函数. 例如Win32 ...

  10. Java 学习 第二篇；面向对象 定义类的简单语法：

    1:基本知识 [public / protected / private] class 类名 { 零个到多个构造器定义; 零个到多个属性; 零个到多个方法; } 其中类中各个成员之间的顺序没有关系,且 ...