返回目录
  • 更多资源请访问>>>BK设计资讯站(Www.Blue1000.Com)Www.Blue1000.Com
  • 主要解答:saucer
  • 感谢:saucer、fason、xinyunyishui
  • 审核者:fason
  • 高分求教,请各位帮忙:如何实现两个列表框的选项双向选择??

  • -----------------------------------------------------------------------------------------

  • 有二个列表框,可多选。如何实现:在其中一个列表中选取多项移到另一个列表中,两者实现双向选取??  
     
    ---------------------------------------------------------------  
     
    <html><head>  
    <script  language="javascript">  
    function  moveOption(oFromList,  oToList,  bAll)  
    {  
       var  nFromLen  =  oFromList.options.length;  
       var  nToLen  =  oToList.options.length;  
       var  i  =  0;  
       while  (nFromLen  >  0)  
       {  
               if  (oFromList.options[i].selected    ¦  ¦  bAll)  
               {  
                           oToList[nToLen++]  =  new  Option(oFromList.options[i].text,  oFromList.options[i].value);  
                           oFromList.options[i]  =  null;  
               }  
               else  
                           i++;  
                 
               nFromLen--;  
       }  
     
       sortOption(oToList);  
    }  
     
    function  compare(a,b)  
    {  
       if  (a.text  <  b.text)  
               return  -1;  
       else  if  (a.text  >  b.text)  
               return  1;  
       return  0;  
    }  
     
    function  sortOption(oList)  
    {  
         if  (oList.options.length  >  1)  
         {  
                   var  optionList    =  new  Array();  
     
                   for  (var  i=0;  i  <  oList.options.length;  i++)  
                   optionList.push(oList.options[i]);  
     
               optionList.sort(compare);  
     
                       oList.length  =  0;  
                   for  (var  i=0;  i  <  optionList.length;  i++)  
                   oList.options[i]  =  optionList[i];  
         }        
    }  
    </script>  
    </head><body>  
    <form  name="form1">  
    <table>  
     <tr>  
         <td>  
               <select  name="leftlist"  multiple  size="4">  
                           <option  value="1">1</option>  
                           <option  value="2">2</option>  
                           <option  value="3">3</option>  
                           <option  value="4">4</option>  
               </select>  
         </td>  
         <td>  
               <input  type="button"  value="<<"  onclick="javascript:moveOption(rightlist,  leftlist,true)"><br>  
               <input  type="button"  value="<"  onclick="javascript:moveOption(rightlist,  leftlist,false)"><br>  
               <input  type="button"  value=">"  onclick="javascript:moveOption(leftlist,  rightlist,false)"><br>  
               <input  type="button"  value=">>"  onclick="javascript:moveOption(leftlist,  rightlist,true)">  
         </td>  
         <td>  
               <select  name="rightlist"  multiple    size="4">              
               </select>  
         </td>  
     </tr>  
    </table>  
    </body></html>  
     
    ---------------------------------------------------------------  
     
    非常抱歉,看错题目了.  
     
    <html>  
    <head>  
    <meta  http-equiv="Content-Type"  content="text/html;  charset=gb2312">  
    <script  language="JavaScript">  
    <!--  
    function  addSrcToDestList()  {  
    destList  =  window.document.forms[0].destList;  
    srcList  =  window.document.forms[0].srcList;  
    var  len  =  destList.length;  
    for(var  i  =  0;  i  <  srcList.length;  i++)  {  
    if  ((srcList.options[i]  !=  null)  &&  (srcList.options[i].selected))  {  
     
    var  found  =  false;  
    for(var  count  =  0;  count  <  len;  count++)  {  
    if  (destList.options[count]  !=  null)  {  
    if  (srcList.options[i].text  ==  destList.options[count].text)  {  
    found  =  true;  
    break;  
               }  
         }  
    }  
    if  (found  !=  true)  {  
    destList.options[len]  =  new  Option(srcList.options[i].text);  
    len++;  
                     }  
               }  
         }  
    }  
     
    function  deleteFromDestList()  {  
    var  destList    =  window.document.forms[0].destList;  
    var  len  =  destList.options.length;  
    for(var  i  =  (len-1);  i  >=  0;  i--)  {  
    if  ((destList.options[i]  !=  null)  &&  (destList.options[i].selected  ==  true))  {  
    destList.options[i]  =  null;  
               }  
         }  
    }  
    //  -->  
    </SCRIPT>  
    </head>  
    <body>  
    <center>  
    <form  method="POST">  
    <table  bgcolor="#FFFFCC">  
     
    <tr>  
    <td  bgcolor="#FFFFCC"  width="85">  
    <select  size="6"  name="srcList"  multiple>  
    <option  value="1">Item  1  
    <option  value="2">Item  2  
    <option  value="3">Item  3  
    <option  value="4">Item  4  
    <option  value="5">Item  5  
    <option  value="6">Item  6  
    </select>  
    </td>  
    <td  bgcolor="#FFFFCC"  width="74"  align="center">  
    <input  type="button"  value="  增加到右边  "  onClick="javascript:addSrcToDestList()">  
    <br><br>  
    <input  type="button"  value="  从右边删除  "  onclick="javascript:deleteFromDestList();">  
    </td>  
    <td  bgcolor="#FFFFCC"  width="69">  
    <select  size="6"  name="destList"  multiple>  
    </select>  
    </td>  
    </tr>  
    </table>  
    </form>  
    </body>  
    </html>  
    ---------------------------------------------------------------  
     
    <script  language="JavaScript">  
    function  copyToList(from,to)  //from表示:包含可选择项目的select对象名字  to表示:列出可选择项目的select对象名字  //你可以根据你的具体情况修改  
    {  
       fromList  =  eval('document.forms[0].'  +  from);  
       toList  =  eval('document.forms[0].'  +  to);  
       if  (toList.options.length  >  0  &&  toList.options[0].value  ==  'temp')  
       {  
           toList.options.length  =  0;  
       }  
       var  sel  =  false;  
       for  (i=0;i<fromList.options.length;i++)  
       {  
           var  current  =  fromList.options[i];  
           if  (current.selected)  
           {  
               sel  =  true;  
               if  (current.value  ==  'temp')  
               {  
                   alert  ('你不能选择这个项目!');  
                   return;  
               }  
               txt  =  current.text;  
               val  =  current.value;  
               toList.options[toList.length]  =  new  Option(txt,val);  
               fromList.options[i]  =  null;  
               i--;  
           }  
       }  
       if  (!sel)  alert  ('你还没有选择任何项目');  
    }  
    function  allSelect()  //这是当用户按下提交按钮时,对列出选择的select对象执行全选工作,让递交至的后台程序能取得相关数据  
    {  
       List  =  document.forms[0].chosen;  
       if  (List.length  &&  List.options[0].value  ==  'temp')  return;  
       for  (i=0;i<List.length;i++)  
       {  
             List.options[i].selected  =  true;  
       }  
    }  
     
    </script>  
    <table  border="0">  <form  onSubmit="allSelect()">  
                               <tr>  
                                   <td>  
                                       <select  name="possible"  size="4"  
               MULTIPLE  width=200  style="width:  200px">  
                                           <option  value="1">中国广州  
                                           <option  value="2">中国上海  
                                           <option  value="3">中国北京  
                                           <option  value="4">中国武汉  
                                                                 
                                       </select>  
                                   </td>  
                                       <td><a  href="javascript:copyToList('possible','chosen')">添加至右方--><br>  
                                           <br>  
                                           </a><a  href="javascript:copyToList('chosen','possible')"><--添加至左方</a></td>  
                                   <td>  
                                       <select  name="chosen"  size="4"  
               MULTIPLE  width=200  style="width:  200px;">  
                                           <option  value="temp">从左边选择你的地区    
                                       </select>  
                                   </td>  
                               </tr>    </form>  
                           </table>

    返回目录