实现两个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>
复制代码

 

posted @   Fintech技术汇  阅读(346)  评论(0)  编辑  收藏  举报
编辑推荐：
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配，妙~啊~
点击右上角即可分享
微信分享提示
SQL AI 助手