<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. iOS学习资料整理

    视频教程(英文) 视频 简介 Developing iOS 7 Apps for iPhone and iPad 斯坦福开放教程之一, 课程主要讲解了一些 iOS 开发工具和 API 以及 iOS S ...

  2. hitTest:withEvent:方法(此方法可实现点击穿透、点击下层视图功能)

    此方法可实现点击穿透.点击下层视图功能 一. hitTest:withEvent:调用过程 iOS系统检测到手指触摸(Touch)操作时会将其放入当前活动Application的事件队列,UIAppl ...

  3. JS截取字符串：slice(),substring()和substr()

    var string='abcdefg' 1.slice() string.slice(startLocation [, endLocation]) ps1:2个参数可以为负数,若参数值为负数,则将该 ...

  4. SPOJ QTREE 系列解题报告

    题目一 : SPOJ 375 Query On a Tree http://www.spoj.com/problems/QTREE/ 给一个树,求a,b路径上最大边权,或者修改a,b边权为t. #in ...

  5. OpenCV——无法启动此程序，丢失**解决办法

    OpenCV程序运行时,有时出现以下错误: 解决方法: 在opencv安装目录下找到这个链接库,将其复制到以下指定目录中 我的链接库目录为:E:\Program files\opencv\build\ ...

  6. uva 10763 Foreign Exchange <"map" ,vector>

    Foreign Exchange Your non-profit organization (iCORE - international Confederation of Revolver Enthu ...

  7. asp.net js 获取服务器控件值

    最近在弄js 但是设计到获取服务器控件的值,有点模糊.百度查了资料都达不到效果.现在看看这个,希望朋友们能用上!! <asp:Label ID="lbDepartName" ...

  8. gulp压缩js

    1.安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务 2.查看nodejs的版本号 3.npm ...

  9. set up size, title to tcl tk main window

    #!/usr/bin/wish wm title . "this is main title" wm geometry . 500x300+30+200 500 --width 3 ...

  10. fence repair（队列水过）

    Fence Repair Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 32916   Accepted: 10638 点我 ...