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

浏览数：18 / 时间：2015年06月11日

<head>
   <title>
   </title>
   
   <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>