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

很多人对 form 默认的多选框效果不太满意，因为选中和未选中的项目是在一起的，当选项较多时问题尤为明显，本文介绍的就是将可选项和选中项分开，并且可以通过操作按钮或者双击来移动选项，操作起来非常方便。


--------------------------------------------------------------

--------------------------------------------------------------


首先将下面的代码放置在页面的标签内：

CSS:

Javascript:

然后将下面的代码放在页面的标签内：
HTML:

 
 method="post" action="multiple_select.html"> 
 multiple name="fromBox" id="fromBox"> 
     value="3">Finland 
     value="4">France 
     value="6">Mexico 
     value="1">Norway 
     value="5">Spain     
     value="2">United Kingdom 
 
 multiple name="toBox" id="toBox"> 
     value="12">Canada 
     value="13">Germany 
     value="11">United States 
 
 
 type="text/javascript"> 
createMovableOptions("fromBox","toBox",500,300,'Available countries','Selected countries'); 
 
You move elements by clicking on the buttons or by double clicking on select box items 
 

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

HTML:

 
  multiple name="fromBox" id="fromBox"> 
   value="3">Finland 
   value="4">France 
   value="6">Mexico 
   value="1">Norway 
   value="5">Spain   
   value="2">United Kingdom 
 
 multiple name="toBox[]" id="topBox"> 
   value="12">Canada 
   value="13">Germany 
   value="11">United States 
 
 

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

Javascript:

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

提交表单的方法：

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

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

Code:

再加一段javascript代码：

Javascript:

 
    function selectItem() 
    { 
        var obj = document.getElementById('toBox[]'); 
        for(var no=0;nooptions.length;no++){ 
            obj.options[no].selected = true; 
        } 
    }