本文 6528 pv

0

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

© kekehu / 技术资源 / 2008.02.17 / 11:45 / 6528PV

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

运行代码 
复制代码 


参数说明如下:
      "fromBox" - 第一个多选列表的id(<select multiple name="fromBox" id="fromBox">)
      "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 篇评论

发表你的见解

打开HTML 打开UBB 打开表情 隐藏 记住我
emotemotemotemotemotemotemotemotemotemotemotemotemotemotemotemotemotemotemotemot
emotemotemotemotemot