实现两个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" /> < ...

随机推荐

json的js和C#操作
C#端的WebService接口接收json格式数据,处理后以json格式返回result using System; using System.Collections.Generic; using ...
ListView加载两种以上不同的布局
不同的项目布局(item layout) Listview一种单一的item 布局有时候不能完全满足业务需求,我们需要加载两种或两种以上不同的布局,实现方法很简单: 重写 getViewTypeCou ...
nginx搭建flv、mp4流媒体服务
1.安装pcre-8.33.tar.bz2 #tar -xvf 1.pcre-8.33.tar.bz2 #cd pcre-8.33/ #./configure #make && mak ...
C#索引器：在集合或数组中取出某一个元素举例 _【转】
Garmmar: [访问修饰符] 数据类型 this[参数列表] { get { 获取索引器的内容 } set { 设置索引器的内容 } } Eg: <span style="font ...
busybox中tftp服务器使用命令
参数说明:-l 是local的缩写,后跟存在于Client的源文件名,或下载Client后重命名的文件名.-r 是remote的缩写,后跟Server即PC机tftp服务器根目录中的源文件名,或上传S ...
js post传值
一种是ajax传值,另一种是post传值, ajax传值: $.ajax({ url: "AjaxTxt/Fild.ashx?Name=duibi&dates=" suzk ...
python之3内置容器
所谓内置容器,就是不需要第三方模块,就可以使用的. 1.list容器,一个有序序列,类似于数组,但比数组强大很多 1.1.如何初始化list,直接一个[]即可,这是一个空的list >>& ...
php中12个魔术方法
本文列举了php面向对象当中12个魔术方法,并对此进行一一详细介绍,希望对新手有所帮助. 1.构造方法: __construct() 参数:自定义触发时机:new的一瞬间自动调用作用:初始化成员属 ...
Radar Installation（POJ 1328 区间贪心）
Radar Installation Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 68578 Accepted: 15 ...
png透明图片
2. JS处理使用DD_belatedPNG(http://www.dillerdesign.com/experiment/DD_belatedPNG/),可以很简单的对界面上所有的透明图片进行同一 ...

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

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

随机推荐

热门专题