本文 8436 pv
0
运行代码 
复制代码
参数说明如下：
提交表单的方法：
当提交表单时，我们希望只有选中的选项值被提交，所以需要一些javascript代码进行一些小的处理。
先在form标签中加入提交事件的处理：
再加一段javascript代码：
function selectItem() {
var obj = document.getElementById('toBox[]');
for(var no=0;no<obj.options.length;no++){
obj.options[no].selected = true;
}
}
一个不错的Form多选列表控件效果
© kekehu / 技术资源 / 2008.02.17 / 11:45 / 8436PV
很多人对 form 默认的多选框效果不太满意，因为选中和未选中的项目是在一起的，当选项较多时问题尤为明显，本文介绍的就是将可选项和选中项分开，并且可以通过操作按钮或者双击来移动选项，操作起来非常方便。运行代码 复制代码 参数说明如下：
"fromBox" - 第一个多选列表的id(<select multiple name="fromBox" id="fromBox">)
"toBox" - 第二个多选列表的id(<select multiple name="toBox[]" id="toBox">)
500 - 控件的总宽度
300 - 控件的总高度
"Available countries" - 第一个多选列表的显示名称
"Selected countries" - 第二个多选列表的显示名称
"toBox" - 第二个多选列表的id(<select multiple name="toBox[]" id="toBox">)
500 - 控件的总宽度
300 - 控件的总高度
"Available countries" - 第一个多选列表的显示名称
"Selected countries" - 第二个多选列表的显示名称
提交表单的方法：
当提交表单时，我们希望只有选中的选项值被提交，所以需要一些javascript代码进行一些小的处理。
先在form标签中加入提交事件的处理：
<FORM onsubmit="selectItem()">
再加一段javascript代码：
function selectItem() {
var obj = document.getElementById('toBox[]');
for(var no=0;no<obj.options.length;no++){
obj.options[no].selected = true;
}
}
本文有 0 篇评论
发表你的见解