实现两个select list box间item的移动和过滤

<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的移动和过滤的更多相关文章

jQuery获取Radio选择的Value值||两个select之间option的互相添加操作(jquery实现)
jQuery获取Radio选择的Value值: 1. $("input[name='radio_name'][checked]").val(); //选择被选中Radio的Val ...
JSF 2 multiple select dropdown box example
In JSF, <h:selectManyMenu /> tag is used to render a multiple select dropdown box – HTML selec ...
oracle中，将两个select语句的结果作为一个整体显示出来
如果我们需要将两个select语句的结果作为一个整体显示出来,我们就需要用到union或者union all关键字.union(或称为联合)的作用是将多个结果合并在一起显示出来.union和union ...
2017 年 9 月 27 日 js(1.两个select 内容互换 2.单选按钮同意可点击下一步 3. 全选框)
1.两个select 内容互换 <!DOCTYPE html><html> <head> <meta charset="UTF- ...
Mysql中两个select语句的连接
Mysql中两个select语句连接需要用到操作符 SQL UNION 操作符 UNION 操作符用于合并两个或多个 SELECT 语句的结果集. 请注意,UNION 内部的 SELECT 语句必须拥 ...
两个Select 之间的值的传递
运行效果: 下面是代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML ...
左右两个Select列表框交换数据的JS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD ...
SQL语句里合并两个select查询结果
SQL UNION 操作符UNION 操作符用于合并两个或多个 SELECT 语句的结果集. 请注意,UNION 内部的 SELECT 语句必须拥有相同数量的列.列也必须拥有相似的数据类型.同时,每条 ...
jQuery：实现两个<select>控件的互移操作
一.直接上代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...

随机推荐

UML学习-状态图
1.状态图概述状态图(Statechart Diagram)主要用于描述一个对象在其生存期间的动态行为,表现为一个对象所经历的状态序列,引起状态转移的事件(Event),以及因状态转移而伴随的动作( ...
文摘：威胁建模(STRIDE方法)
文摘,原文地址:https://msdn.microsoft.com/zh-cn/magazine/cc163519.aspx 威胁建模的本质:尽管通常我们无法证明给定的设计是安全的,但我们可以从自己 ...
提示框的优化之自定义Toast组件之（三）Toast组件优化
开发步骤: 在toast_customer.xml文件中添加一个图片组件对象显示提示图片 <?xml version="1.0" encoding="utf-8&q ...
Android 使用Facebook的 Stetho工具
Stetho在Android Studio中用: 1, 引入 compile 'com.facebook.stetho:stetho:1.3.1' compile 'com.facebook.stet ...
BestCoder Round #20 部分题解(A,B,C)(hdu5123,5124,5125)
转载请注明出处: http://www.cnblogs.com/fraud/ ——by fraud who is the best? Time Limit: 2000/1000 MS ...
mysql中插入多条记录-微软批处理
当向mysql中插入大量数据时,可以使用微软的批处理方式.这样可以防止内存溢出又提高了效率.我写了一个mysql中插入多条记录的例子.赋值代码可以直接使用. 1.首先需要添加两个dll MySql.D ...
javascript prototype __proto__区别
An Object's __proto__ property references the same object as its internal [[Prototype]] (often refer ...
SD/MMC卡初始化及读写流程
二.MMC/SD卡的模型和工作原理 PIN脚.SD卡总线.SD卡结构.SD卡寄存器.上电过程 SD卡寄存器: OCR:操作电压寄存器: 只读,32位第31位: 表示卡上电的状态位 CID: 卡 ...
WebSocket C# Demo
WebSocket 规范 WebSocket 协议本质上是一个基于 TCP 的协议.为了建立一个 WebSocket 连接,客户端浏览器首先要向服务器发起一个 HTTP 请求,这个请求和通常的 HTT ...
HttpRuntime类
HttpRuntime在ASP.NET处理请求中负责的是创建HttpContext对象以及调用HttpApplicationFactory创建HttpApplication. 其定义如下: publi ...

实现两个select list box间item的移动和过滤

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

随机推荐

热门专题