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

最新推荐文章于 2021-08-31 11:08:39 发布

weixin_30908707

最新推荐文章于 2021-08-31 11:08:39 发布

阅读量75

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/dereklovecc/p/3998698.html

本文介绍了一个使用jQuery实现的列表筛选功能，并通过双击或按钮操作完成列表项的拖拽转移。该功能包括输入框实时过滤选项、取消按钮清空筛选条件等特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>