多选列表JS控件

来源：互联网发布：nasa用什么编程编辑：程序博客网时间：2024/06/11 19:44

多选框控件效果 <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> .multipleSelectBoxControl span{ /* Labels above select boxes*/ font-family:arial; font-size:11px; font-weight:bold; } .multipleSelectBoxControl div select{ /* Select box layout */ font-family:arial; height:100%; } .multipleSelectBoxControl input{ /* Small butons */ width:25px; } .multipleSelectBoxControl div{ float:left; } .multipleSelectBoxDiv {} fieldset{ width:500px; margin:10px; } </style> <mce:script type="text/javascript"></mce:script><form method="post" action="" onsubmit="selectItem()"><select multiple name="fromBox" id="fromBox"> <option value="3">中国</option> <option value="4">美国</option> <option value="6">英国</option> <option value="1">法国</option> <option value="5">俄罗斯</option> <option value="2">意大利</option></select><select multiple name="toBox[]" id="toBox"> <option value="12">韩国</option> <option value="13">印度</option> <option value="11">巴西</option></select></form><mce:script type="text/javascript"></mce:script><p>你可以通过点击操作按钮或者直接双击移动选项。</p>

配置方法：

（1）用类似下面的代码创建两个多选列表

HTML:

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

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

Javascript:

 
<script type="text/javascript">
createMovableOptions("fromBox","toBox",500,300,'Available countries','Selected countries');
</script>

参数说明如下：
      "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:

再加一段javascript代码：

Javascript:

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