首页 新闻 论坛 群组 Blog 文档 下载 读书 Tag 网摘 搜索 .NET Java 游戏 视频 人才 外包 培训 数据库 书店 程序员
中国软件网
欢迎您:游客 | 登录 注册 帮助
  • 列表框(SELECT) 通用的操作函数 欢迎拍砖
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于:2008-03-19 11:43:44 楼主
    操作包括:
    1,搜索;
    2,两个列表框之间互相传递;
    3,读取列表框选中的值,返回以逗号隔开的字符;
    4,清除列表框中所有的选中项;
    5,全选或清除全选;

    在线演示: 示例
    下载JS文件: select.js

    比较简单实用,欢迎补充,嘿嘿
    100  修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于:2008-03-19 11:49:331楼 得分:0
    支持
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于:2008-03-19 11:49:472楼 得分:0
    不错,mark
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于:2008-03-19 11:58:033楼 得分:0
    jF~
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • xiaojing7
    • 等级:
    发表于:2008-03-19 12:02:274楼 得分:0
    ..
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于:2008-03-19 12:02:325楼 得分:0
    支持下吧
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于:2008-03-19 12:11:506楼 得分:0
    呵呵,接分.
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于:2008-03-19 12:35:247楼 得分:0
    不错哦。

    对于选中那列,最好也加个全选与清除。比较方便。
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • only_endure
    • 等级:
    发表于:2008-03-19 16:29:188楼 得分:0
    jf  jf
    jf jf
      jf
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于:2008-03-19 20:04:479楼 得分:0
    mark 传说美德!
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • songpengasp
    • 等级:
    发表于:2008-03-20 10:14:0510楼 得分:0
    还不错  收藏
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于:2008-03-20 10:21:3611楼 得分:0
    支持,顶顶顶顶顶顶顶顶顶顶顶顶
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于:2008-03-20 10:23:4012楼 得分:0
    还以为是迅雷那种呢,有点失望
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • liao8735
    • 等级:
    发表于:2008-03-20 11:38:1213楼 得分:0
    不错!
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于:2008-03-20 15:31:1314楼 得分:0
    恩,粉不错,收藏了。。
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于:2008-03-20 17:00:2915楼 得分:0
    呵呵,不错哦,收藏了拉,谢谢先~~~~~
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • songpengasp
    • 等级:
    发表于:2008-03-24 14:24:3116楼 得分:0
    up jf
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • bollton
    • 等级:
    发表于:2008-03-24 21:43:5317楼 得分:0
    8错。
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于:2008-03-24 22:01:2518楼 得分:0
    我不收藏ie only的代码
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • johnnytbz
    • 等级:
    发表于:2008-03-25 08:26:0519楼 得分:0
    与firefox不通用
    将m_dest.add(newOption, m_dest.length)
    改成m_dest.options[m_dest.length]=newOption
    才通用,现在可不能只考虑IE了
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • mumuTiger
    • 等级:
    发表于:2008-03-25 08:47:3320楼 得分:0
    支持下 ....
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于:2008-03-25 09:21:5821楼 得分:0
    也写了一个,还不是很完善,移动以后再移回来位置变了,这部分的功能没有写,要上班了没时间了晚上再写,大家也顺便给提提意见

    JScript code
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>列表操作</title> <script type="text/javascript"> var $=function(strId){ return document.getElementById(strId); } //定义操作select类对象 function SelectOperater(oSrcEl,oDstEl,oPushTrigger,oPopTrigger,nSrcSize,nDstSize){ //获取操作对象 this.srcEl=typeof(oSrcEl)=="object"?oSrcEl:$(oSrcEl); this.dstEl=typeof(oDstEl)=="object"?oDstEl:$(oDstEl); this.pushTrigger=typeof(oPushTrigger)=="object"?oDstEl:$(oPushTrigger); this.popTrigger=typeof(oPopTrigger)=="object"?oDstEl:$(oPopTrigger); //设置类型为下拉列表 this.srcEl.size=parseInt(nSrcSize); this.dstEl.size=parseInt(nDstSize); this.srcEl.multiple=true; this.dstEl.multiple=true; //进行事件绑定 var oSelOperator=this; this.srcEl.ondblclick=function(){ var srcEl=oSelOperator.srcEl; var dstEl=oSelOperator.dstEl; if(srcEl.selectedIndex>-1){ var oOption=srcEl.options[srcEl.selectedIndex]; dstEl.options.add(new Option(oOption.text,oOption.value)); if(document.all) srcEl.options.remove(oOption.index); else srcEl.removeChild(oOption); } } this.dstEl.ondblclick=function(){ var srcEl=oSelOperator.srcEl; var dstEl=oSelOperator.dstEl; if(dstEl.selectedIndex>-1){ var oOption=dstEl.options[dstEl.selectedIndex]; srcEl.options.add(new Option(oOption.text,oOption.value)); if(document.all) dstEl.options.remove(oOption.index); else dstEl.removeChild(oOption); } } this.pushTrigger.onclick=function(){ var srcEl=oSelOperator.srcEl; var dstEl=oSelOperator.dstEl; var oOption,arrSelect=new Array(); //获取选中项添加 for(var i=0,nLen=srcEl.options.length;i<nLen;i++){ if(srcEl.options[i].selected){ oOption=srcEl.options[i]; dstEl.options.add(new Option(oOption.text,oOption.value)); arrSelect.push(i-arrSelect.length); } } //对选中项进行移除操作 for(var i=0,nLen=arrSelect.length;i<nLen;i++){ if(document.all) srcEl.options.remove(srcEl.options[arrSelect[i]].index); else srcEl.removeChild(srcEl.options[arrSelect[i]]); } } this.popTrigger.onclick=function(){ var srcEl=oSelOperator.srcEl; var dstEl=oSelOperator.dstEl; var oOption,arrSelect=new Array(); //获取选中项添加 for(var i=0,nLen=dstEl.options.length;i<nLen;i++){ if(dstEl.options[i].selected){ oOption=dstEl.options[i]; srcEl.options.add(new Option(oOption.text,oOption.value)); arrSelect.push(i-arrSelect.length); } } //对选中项进行移除操作 for(var i=0,nLen=arrSelect.length;i<nLen;i++){ if(document.all) dstEl.options.remove(dstEl.options[arrSelect[i]].index); else dstEl.removeChild(dstEl.options[arrSelect[i]]); } } } window.onload=function(){ new SelectOperater("select1","select2","btnAdd","btnDel",15,15); } </script> </head> <body> <label> <select name="select1" id="select1" style="width:200px"> <option value="1458" selected="selected">三星</option> <option value="1452">摩托罗拉</option> <option value="1448">诺基亚</option> <option value="1461">CECT</option> <option value="1446">中兴</option> <option value="1444">波导</option> <option value="1428">索尼</option> <option value="1442">TCL</option> <option value="1456">夏新</option> <option value="1438">海尔</option> <option value="1459">LG</option> <option value="1437">康佳</option> <option value="1471">联想</option> <option value="1506">天时达</option> <option value="1460">NEC</option> <option value="1498">ZTC中天</option> <option value="1449">南方高科</option> <option value="1450">西门子</option> <option value="1453">阿尔卡特</option> <option value="1465">托普</option> <option value="1493">OKWAP</option> <option value="1468">UT斯达康</option> <option value="1469">大显</option> <option value="1466">迪比特</option> <option value="1479">金立</option> <option value="1451">飞利浦</option> <option value="1445">首信</option> <option value="1440">东信</option> <option value="1439">科健</option> <option value="1477">桑达</option> <option value="1462">海信</option> <option value="1508">奥克斯</option> <option value="1443">熊猫</option> <option value="1478">唯开</option> <option value="1495">侨兴</option> <option value="1482">明基</option> <option value="1537">GT佳通</option> <option value="1544">天语</option> <option value="1509">华为</option> <option value="1454">松下</option> <option value="1473">多普达</option> <option value="1475">万利达</option> <option value="1457">爱立信</option> <option value="1481">普天</option> <option value="1512">泛泰</option> <option value="1511">金鹏</option> <option value="1570">德赛</option> <option value="1429">三菱</option> <option value="1529">创维</option> <option value="1500">杰特Ztel</option> <option value="1501">至高</option> <option value="1519">SK</option> <option value="1525">维科</option> <option value="1476">乐华</option> <option value="1533">夏普</option> <option value="1540">振华欧比</option> <option value="1503">步步高</option> <option value="1531">科盛通信</option> <option value="1523">互通</option> <option value="1557">友利通</option> <option value=