列表框(SELECT) 通用的操作函数欢迎拍砖

与firefox不通用
将m_dest.add(newOption, m_dest.length)
改成m_dest.options[m_dest.length]=newOption
才通用，现在可不能只考虑IE了

也写了一个,还不是很完善，移动以后再移回来位置变了，这部分的功能没有写，要上班了没时间了晚上再写，大家也顺便给提提意见<!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="1492">朗讯</option>
  <option value="1546">亿通</option>
  <option value="1480">佳通</option>
  <option value="1547">南极星</option>
  <option value="1541">长虹</option>  <option value="1441">厦华</option>
  <option value="1435">京瓷</option>
  <option value="1489">酷派</option>
  <option value="1517">华硕</option>
  <option value="1434">三洋</option>
  <option value="1556">七喜</option>  <option value="1431">萨基姆</option>
  <option value="1532">华立</option>
  <option value="1483">中讯天创</option>
  <option value="1543">唯奥</option>
  <option value="1472">中桥</option>
  <option value="1578">盛泰</option>  <option value="1558">黑莓</option>
  <option value="1486">奥盛</option>
  <option value="1497">紫光UNIS</option>
  <option value="1559">奥翔</option>
  <option value="1467">东芝</option>
  <option value="1447">Acer</option>  <option value="1579">埃立特</option>
  <option value="1491">数源</option>
  <option value="1505">NEO</option>
  <option value="1565">O2</option>
  <option value="1545">恒基伟业</option>
  <option value="1538">Palm</option>  <option value="1555">技嘉</option>
  <option value="1464">大唐</option>
  <option value="1513">东方龙</option>
  <option value="1560">深爱</option>
  <option value="1514">神达</option>
  <option value="1580">伊诺</option>  <option value="1504">中天</option>
  <option value="1432">博世</option>
  <option value="1470">浪潮</option>
  <option value="1572">权智</option>
  <option value="1542">惠普</option>
  <option value="1436">百利丰</option>  <option value="1515">Beluga</option>
  <option value="1563">迪士尼</option>
  <option value="1571">宏康</option>
  <option value="1430">汉佳诺</option>
  <option value="1577">IDO</option>
  <option value="1581">VK唯开</option>  <option value="1583">索尼爱立信</option>
  <option value="1575">摩普达</option>
  <option value="1567">VOSIA奥翔</option>
  <option value="1487">厦新</option>
  <option value="1433">现代</option>
  <option value="1561">Apple</option>  <option value="1499">ZTT</option>
  <option value="1574">都宝</option>
</select><input type="button" id="btnAdd" value=">>"/>
<input type="button" id="btnDel" value="<<"/>   <select name="select2"   id="select2" style="width:200px">
</select>
</body>
</html>

补充一些：
//全选列表中的项
//反选列表中的项
//返回列表中选择项数目
//清空列表
//删除列表选中项，返回删除项的数量
//查找相应的项是否存在
　　//repeatCheck是否进行重复性检查
　　//若为"v"，按值进行重复值检查
　　//若为"t"，按文字进行重复值检查
　　//若为"vt"，按值和文字进行重复值检查
　　//其它值，不进行重复性检查，返回false
//向列表中追加一个项
　　//list 是要追加的列表
　　//optText 和 optValue 分别表示项的文字和值
　　//repeatCheck 是否进行重复性检查，参见 OptionExists
////添加成功返回 true，失败返回 false
//插入项
　　//index 插入位置，当插入位置 >= 列表现有项数量时，其作用相当于不进行重复检查的追加项
　　//optText 和 optValue 分别表示项的文字和值
//将一个列表中的项导到另一个列表中
　　//repeatCheck是否进行重复性检查，参见OptionExists
　　//deleteSource项导到目标后，是否删除源列表中的项
　　//返回影响的项数量
//列表中选中项上移
//列表中选中项下移http://www.cftea.com/c/756.asp
http://www.cftea.com/c/757.asp

用的是firefox，点了下搜索报错了。还没看IE下如何。

    //全选
    function selectAll(sel)
    {
        for( j=0; j<sel.length; j++ )
        {
            sel.options[j].selected = true;
        }
        return true;
    }
    //取消
function unSelectAll(sel)
    {
        for( j=0; j<sel.length; j++ )
        {
            sel.options[j].selected = false;
        }
        return true;
    }
    //清空
    function empty(sel)
    {
        for( j=sel.length-1; j>=0; j-- )
        {
            sel.options[j] = null;
        }
        return true;
    }
    //根据value选择
    function SelectOneItem( smObject , smValue )
{
        for( j=0; j< smObject.length; j++ )
        {
            smo = smObject.options[j];
            if ( smo.value == smValue )
            {
                smObject.options[j].selected = true;
                return ;
            }
        }
    }
    //两个select交换
    function move( col1, col2)
    {
       if(col1.selectedIndex==-1) return;
     for (var i=0;i<col1.length;i++) {
            if (col1.options[i].selected){
       toMove = col1.options[i];
       opt = new Option( toMove.text, toMove.value, false, false );
       col1.options[i] = null;
       i=i-1;
       var len = col2.length;
       col2.options[len] = opt;
    }
}
       return true;
    }
    function moveall(col1, col2)
    {
        while(col1.selectedIndex!=-1)
        {
            move(col1, col2);
        }
    }
    //添加
    function addItem(name,value,col2)
    {
       opt = new Option( name, value, false, false );
       col2.options[col2.length] = opt;
       col2.selectedIndex = col2.length-1;
       return true;
    }
    //删除
    function remove( col1)
    {
      col1.options[ col1.selectedIndex ] = null;
      return true;
    }
    //向上移动
    function up( col1 )
    {
      index = col1.selectedIndex;
      if( index <= 0 )
        return true;      toMoveX = col1.options[ index -1 ];
      toMoveY = col1.options[ index ];
      optX = new Option( toMoveX.text, toMoveX.value, false, false );
      optY = new Option( toMoveY.text, toMoveY.value, false, false );
      col1.options[index] = optX;
      col1.options[index-1] = optY;
      col1.selectedIndex = index-1;
      return true;
    }
    //向下移动
    function down( col1 )
    {
      index = col1.selectedIndex;
      if( index+1 >=  col1.options.length )
        return true;      toMoveX = col1.options[ index ];
      toMoveY = col1.options[ index + 1 ];
      optX = new Option( toMoveX.text, toMoveX.value, false, false );
      optY = new Option( toMoveY.text, toMoveY.value, false, false );
      col1.options[index] = optY;
      col1.options[index+1] = optX;
      col1.selectedIndex = index+1;      return true;
    }

调试易

列表框(SELECT) 通用的操作函数欢迎拍砖

解决方案 »

列表框(SELECT) 通用的操作函数 欢迎拍砖

解决方案 »

列表框(SELECT) 通用的操作函数欢迎拍砖