程序博客网 > java jar 协议

一个不错的 Form 多选列表控件效果

来源：互联网 发布：java jar 协议 编辑：程序博客网 时间：2024/05/15 12:39
很多人对 form 默认的多选框效果不太满意，因为选中和未选中的项目是在一起的，当选项较多时问题尤为明显，本文介绍的就是将可选项和选中项分开，并且可以通过操作按钮或者双击来移动选项，操作起来非常方便。
首先将下面的代码放置在页面的<head>标签内：
CSS: 
  1.  
  2. <style type="text/css"> 
  3.  
  4.  
  5.     .multipleSelectBoxControl span{    /* Labels above select boxes*/ 
  6.         font-family:arial; 
  7.         font-size:11px; 
  8.         font-weight:bold; 
  9.     } 
  10.     .multipleSelectBoxControl div select{    /* Select box layout */ 
  11.         font-family:arial; 
  12.         height:100%; 
  13.     } 
  14.     .multipleSelectBoxControl input{    /* Small butons */ 
  15.         width:25px;     
  16.     } 
  17.      
  18.     .multipleSelectBoxControl div{ 
  19.         float:left; 
  20.     } 
  21.          
  22.     .multipleSelectBoxDiv 
  23.     </style> 
  24.  



Javascript: 
  1.  
  2. <script type="text/javascript"> 
  3.      
  4.     /************************************************************************************************************ 
  5.     (C) www.dhtmlgoodies.com, October 2005 
  6.      
  7.     This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.     
  8.      
  9.     Terms of use: 
  10.     You are free to use this script as long as the copyright message is kept intact. However, you may not 
  11.     redistribute, sell or repost it without our permission. 
  12.      
  13.     Thank you! 
  14.      
  15.     www.dhtmlgoodies.com 
  16.     Alf Magne Kalleland 
  17.      
  18.     ************************************************************************************************************/ 
  19.      
  20.          
  21.     var fromBoxArray = new Array(); 
  22.     var toBoxArray = new Array(); 
  23.     var selectBoxIndex = 0; 
  24.      
  25.     function moveSingleElement() 
  26.     { 
  27.         var selectBoxIndex = this.parentNode.parentNode.id.replace(/[^/d]/g,''); 
  28.         var tmpFromBox; 
  29.         var tmpToBox; 
  30.         if(this.tagName.toLowerCase()=='select'){             
  31.             tmpFromBox = this; 
  32.             if(tmpFromBox==fromBoxArray[selectBoxIndex])tmpToBox = toBoxArray[selectBoxIndex]; else tmpToBox = fromBoxArray[selectBoxIndex]; 
  33.         }else{ 
  34.          
  35.             if(this.value.indexOf('>')>=0){ 
  36.                 tmpFromBox = fromBoxArray[selectBoxIndex]; 
  37.                 tmpToBox = toBoxArray[selectBoxIndex];             
  38.             }else{ 
  39.                 tmpFromBox = toBoxArray[selectBoxIndex]; 
  40.                 tmpToBox = fromBoxArray[selectBoxIndex];     
  41.             } 
  42.         } 
  43.          
  44.         for(var no=0;no<tmpFromBox.options.length;no++){ 
  45.             if(tmpFromBox.options[no].selected){ 
  46.                 tmpFromBox.options[no].selected = false; 
  47.                 tmpToBox.options[tmpToBox.options.length] = new Option(tmpFromBox.options[no].text,tmpFromBox.options[no].value); 
  48.                  
  49.                 for(var no2=no;no2<(tmpFromBox.options.length-1);no2++){ 
  50.                     tmpFromBox.options[no2].value = tmpFromBox.options[no2+1].value; 
  51.                     tmpFromBox.options[no2].text = tmpFromBox.options[no2+1].text; 
  52.                     tmpFromBox.options[no2].selected = tmpFromBox.options[no2+1].selected; 
  53.                 } 
  54.                 no = no -1; 
  55.                 tmpFromBox.options.length = tmpFromBox.options.length-1; 
  56.                                              
  57.             }             
  58.         } 
  59.          
  60.          
  61.         var tmpTextArray = new Array(); 
  62.         for(var no=0;no<tmpFromBox.options.length;no++){ 
  63.             tmpTextArray.push(tmpFromBox.options[no].text + '___' + tmpFromBox.options[no].value);             
  64.         } 
  65.         tmpTextArray.sort(); 
  66.         var tmpTextArray2 = new Array(); 
  67.         for(var no=0;no<tmpToBox.options.length;no++){ 
  68.             tmpTextArray2.push(tmpToBox.options[no].text + '___' + tmpToBox.options[no].value);             
  69.         }         
  70.         tmpTextArray2.sort(); 
  71.          
  72.         for(var no=0;no<tmpTextArray.length;no++){ 
  73.             var items = tmpTextArray[no].split('___'); 
  74.             tmpFromBox.options[no] = new Option(items[0],items[1]); 
  75.              
  76.         }         
  77.          
  78.         for(var no=0;no<tmpTextArray2.length;no++){ 
  79.             var items = tmpTextArray2[no].split('___'); 
  80.             tmpToBox.options[no] = new Option(items[0],items[1]);             
  81.         } 
  82.     } 
  83.      
  84.     function moveAllElements() 
  85.     { 
  86.         var selectBoxIndex = this.parentNode.parentNode.id.replace(/[^/d]/g,''); 
  87.         var tmpFromBox; 
  88.         var tmpToBox;         
  89.         if(this.value.indexOf('>')>=0){ 
  90.             tmpFromBox = fromBoxArray[selectBoxIndex]; 
  91.             tmpToBox = toBoxArray[selectBoxIndex];             
  92.         }else{ 
  93.             tmpFromBox = toBoxArray[selectBoxIndex]; 
  94.             tmpToBox = fromBoxArray[selectBoxIndex];     
  95.         } 
  96.          
  97.         for(var no=0;no<tmpFromBox.options.length;no++){ 
  98.             tmpToBox.options[tmpToBox.options.length] = new Option(tmpFromBox.options[no].text,tmpFromBox.options[no].value);             
  99.         }     
  100.          
  101.         tmpFromBox.options.length=0; 
  102.          
  103.     } 
  104.      
  105.      
  106.      
  107.     function createMovableOptions(fromBox,toBox,totalWidth,totalHeight,labelLeft,labelRight) 
  108.     {         
  109.         fromObj = document.getElementById(fromBox); 
  110.         toObj = document.getElementById(toBox); 
  111.          
  112.  
  113.          
  114.         fromObj.ondblclick = moveSingleElement; 
  115.         toObj.ondblclick = moveSingleElement; 
  116.  
  117.          
  118.         fromBoxArray.push(fromObj); 
  119.         toBoxArray.push(toObj); 
  120.          
  121.         var parentEl = fromObj.parentNode; 
  122.          
  123.         var parentDiv = document.createElement('DIV'); 
  124.         parentDiv.className='multipleSelectBoxControl'; 
  125.         parentDiv.id = 'selectBoxGroup' + selectBoxIndex; 
  126.         parentDiv.style.width = totalWidth + 'px'; 
  127.         parentDiv.style.height = totalHeight + 'px'; 
  128.         parentEl.insertBefore(parentDiv,fromObj); 
  129.          
  130.          
  131.         var subDiv = document.createElement('DIV'); 
  132.         subDiv.style.width = (Math.floor(totalWidth/2) - 15) + 'px'; 
  133.         fromObj.style.width = (Math.floor(totalWidth/2) - 15) + 'px'; 
  134.  
  135.         var label = document.createElement('SPAN'); 
  136.         label.innerHTML = labelLeft; 
  137.         subDiv.appendChild(label); 
  138.          
  139.         subDiv.appendChild(fromObj); 
  140.         subDiv.className = 'multipleSelectBoxDiv'; 
  141.         parentDiv.appendChild(subDiv); 
  142.          
  143.          
  144.         var buttonDiv = document.createElement('DIV'); 
  145.         buttonDiv.style.verticalAlign = 'middle'; 
  146.         buttonDiv.style.paddingTop = (totalHeight/2) - 50 + 'px'; 
  147.         buttonDiv.style.width = '30px'; 
  148.         buttonDiv.style.textAlign = 'center'; 
  149.         parentDiv.appendChild(buttonDiv); 
  150.          
  151.         var buttonRight = document.createElement('INPUT'); 
  152.         buttonRight.type='button'; 
  153.         buttonRight.value = '>'; 
  154.         buttonDiv.appendChild(buttonRight);     
  155.         buttonRight.onclick = moveSingleElement;     
  156.          
  157.         var buttonAllRight = document.createElement('INPUT'); 
  158.         buttonAllRight.type='button'; 
  159.         buttonAllRight.value = '>>'; 
  160.         buttonAllRight.onclick = moveAllElements; 
  161.         buttonDiv.appendChild(buttonAllRight);         
  162.          
  163.         var buttonLeft = document.createElement('INPUT'); 
  164.         buttonLeft.style.marginTop='10px'; 
  165.         buttonLeft.type='button'; 
  166.         buttonLeft.value = '<'; 
  167.         buttonLeft.onclick = moveSingleElement; 
  168.         buttonDiv.appendChild(buttonLeft);         
  169.          
  170.         var buttonAllLeft = document.createElement('INPUT'); 
  171.         buttonAllLeft.type='button'; 
  172.         buttonAllLeft.value = '<<'; 
  173.         buttonAllLeft.onclick = moveAllElements; 
  174.         buttonDiv.appendChild(buttonAllLeft); 
  175.          
  176.         var subDiv = document.createElement('DIV'); 
  177.         subDiv.style.width = (Math.floor(totalWidth/2) - 15) + 'px'; 
  178.         toObj.style.width = (Math.floor(totalWidth/2) - 15) + 'px'; 
  179.  
  180.         var label = document.createElement('SPAN'); 
  181.         label.innerHTML = labelRight; 
  182.         subDiv.appendChild(label); 
  183.                  
  184.         subDiv.appendChild(toObj); 
  185.         parentDiv.appendChild(subDiv);         
  186.          
  187.         toObj.style.height = (totalHeight - label.offsetHeight) + 'px'; 
  188.         fromObj.style.height = (totalHeight - label.offsetHeight) + 'px'; 
  189.  
  190.              
  191.         selectBoxIndex++; 
  192.          
  193.     } 
  194.      
  195.      
  196.      
  197.     </script>         
  198.  



然后将下面的代码放在页面的<body>标签内：
HTML: 
  1.  
  2. <form method="post" action="multiple_select.html"> 
  3. <select multiple name="fromBox" id="fromBox"> 
  4.     <option value="3">Finland</option> 
  5.     <option value="4">France</option> 
  6.     <option value="6">Mexico</option> 
  7.     <option value="1">Norway</option> 
  8.     <option value="5">Spain</option>     
  9.     <option value="2">United Kingdom</option> 
  10. </select> 
  11. <select multiple name="toBox" id="toBox"> 
  12.     <option value="12">Canada</option> 
  13.     <option value="13">Germany</option> 
  14.     <option value="11">United States</option> 
  15. </select> 
  16. </form> 
  17. <script type="text/javascript"> 
  18. createMovableOptions("fromBox","toBox",500,300,'Available countries','Selected countries'); 
  19. </script> 
  20. <p>You move elements by clicking on the buttons or by double clicking on select box items</p> 
  21.  



配置方法：
（1）用类似下面的代码创建两个多选列表

HTML: 
  1.  
  2.  <select multiple name="fromBox" id="fromBox"> 
  3.   <option value="3">Finland</option> 
  4.   <option value="4">France</option> 
  5.   <option value="6">Mexico</option> 
  6.   <option value="1">Norway</option> 
  7.   <option value="5">Spain</option>   
  8.   <option value="2">United Kingdom</option> 
  9. </select> 
  10. <select multiple name="toBox[]" id="topBox"> 
  11.   <option value="12">Canada</option> 
  12.   <option value="13">Germany</option> 
  13.   <option value="11">United States</option> 
  14. </select> 
  15.  


（2）用下面的javascript代码初始化设置：

Javascript: 
  1.  
  2. <script type="text/javascript"> 
  3. createMovableOptions("fromBox","toBox",500,300,'Available countries','Selected countries'); 
  4. </script> 
  5.  


参数说明如下：
      "fromBox" - 第一个多选列表的id(<select multiple name="fromBox" id="fromBox">)
      "toBox" - 第二个多选列表的id(<select multiple name="toBox[]" id="toBox">)
      500 - 控件的总宽度
      300 - 控件的总高度
      "Available countries" - 第一个多选列表的显示名称
      "Selected countries" - 第二个多选列表的显示名称

提交表单的方法：

当提交表单时，我们希望只有选中的选项值被提交，所以需要一些javascript代码进行一些小的处理。

先在form标签中加入提交事件的处理：

Code:

<FORM onsubmit="selectItem()">



再加一段javascript代码：

Javascript: 
  1.  
  2.     function selectItem() 
  3.     { 
  4.         var obj = document.getElementById('toBox[]'); 
  5.         for(var no=0;no<obj.options.length;no++){ 
  6.             obj.options[no].selected = true; 
  7.         } 
  8.     } 
  9.  


<SCRIPT type=text/javascript><!--google_ad_client = "pub-9963302116430362";google_ad_width = 468;google_ad_height = 15;google_ad_format = "468x15_0ads_al";//2006-12-02: codebitgoogle_ad_channel = "7590920726";google_color_border = "FFFFFF";google_color_bg = "FFFFFF";google_color_link = "669933";google_color_text = "666666";google_color_url = "7C6E3E";//--></SCRIPT><SCRIPT src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type=text/javascript></SCRIPT><SCRIPT>window.google_render_ad();</SCRIPT>
java jar 协议 java jar 协议
原创粉丝点击
热门IT博客
加权并查集算法加权并查集算法
奇艺qsv转换工具 mac奇艺qsv转换工具 mac
招聘软件有哪些
淘宝发布商品后
淘宝直播送流量10m
软件系统测试计划书
数据库中update的用法
免费姓名藏头诗软件
矢量图形软件
软件qa
c2c网络平台有哪些
linux locate
mysql查询
线切割编程主板怎么装
东莞进销存软件
淘宝一天刷多少单安全
c语言面向对象编程
我国颁布的网络法规
库里常规赛数据
吉利 比亚迪 知乎
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 消防救生包 消防转制 消防员吧 消防两三事吧 消防吧改革吧 消防工程师吧 消防转制吧 注册消防工程师吧 消防队员 消防报价 消防申请 消防论坛 消防战士 消防工作 建筑消防规范 消防员证 小小消防员 消防员工资 消防员简笔画 消防员报名 消防员图片 消防员英语 小小消防员作文 消防员报名条件 消防员图画 消防员怎么画 消防员山姆 全集 消防员英文 消防员考试 我是消防员 消防员资格考试 初级消防员考试 中级消防员考试 建筑消防员资格证 消防员考试查询 消防员资格证怎么考 高级消防员考试 初级建筑消防员 建筑消防员证 初级消防员证书 初级消防员培训

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里