从一个多选框将选项移动到另一多选框中的js小代码

<? xml version="1.0" encoding="ISO-8859-1" ?>
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml"  xml:lang ="en-US"  lang ="en-US" >
     < head >
         < title >  Test  </ title >
         < meta  http-equiv ="Content-Type"  content ="text/html; charset=ISO-8859-1"   />
         < meta  name ="title"  content =""   />
         < meta  name ="author"  content =""   />
         < meta  name ="subject"  content =""   />
         < meta  name ="language"  content ="en"   />
         < meta  name ="keywords"  content =""   />
         < style  type ="text/css" > ...
            #debugDiv {...}{ border: 1px solid red; background-color: gray; }
         </ style >
     </ head >

     < body >


< script  type ="text/javascript" > ...
    // 获取对象
    function getElementByIdString ( IdString ) ...{
        var control;
        switch ( typeof ( IdString ) ) ...{
            case "string" : 
                control = document.getElementById ( IdString );
                break;
            case "object" :
                control = IdString;
                break;
        }
        if ( typeof(control) == "object" && control != null ) ...{
            if ( control.tagName.toLowerCase() == "select" ) ...{
                return control;
            } else ...{
                return null;
            }
        } else ...{
            return null;
        }
    }



    // 将选项从一个选择框移动到另一个选择框中
    function moveSeleteItems ( srcCtr, descCtr ) ...{
        var srcCtr = getElementByIdString ( srcCtr );
        var descCtr = getElementByIdString ( descCtr );
        if ( srcCtr === null || descCtr === null ) ...{
            return false;
        }
        if ( srcCtr.selectedIndex < 0 ) ...{ return false; }
        debug ( srcCtr.name + " --> " + descCtr.name + "<br /> " );
        // 取数据源长度
        len = srcCtr.options.length;
        // 添加到目标框
        for ( i = 0; i < len; i++ ) ...{
            if ( srcCtr.options[i].selected  ) ...{
                debug ( srcCtr.options[i].index + "<br /> " );
                appendOption ( descCtr, srcCtr.options[i].innerText, srcCtr.options[i].value );
            }
        }
        // 从源框中移除
        for ( i = len-1; i > 0; i-- ) ...{
            if ( srcCtr.options[i].selected ) ...{
                deleteOption ( srcCtr, i );
            }
        }
    }

    // 添加一个选项
    function appendOption ( descCtr, descText, descValue ) ...{
        //alert( "appendOption : " + getElementByIdString ( descCtr ) );
        descCtr = getElementByIdString ( descCtr );
        var oOption = document.createElement("option");
        oOption.innerText = descText;
        oOption.value = descValue;
        descCtr.appendChild ( oOption );
    }
    // 删除一个选项
    function deleteOption ( descCtr, srcIndex ) ...{
        descCtr.options[srcIndex].selected = false;
        descCtr.removeChild ( descCtr.options[srcIndex] );
    }
    // 当选项选择时触发
    function changeSelectItem ( srcCtr ) ...{
        var srcCtr = document.getElementById(srcCtr);
        if ( srcCtr.options.value == -1 ) ...{
            clearSelectItems ( srcCtr );
            return true;
        }

//        // 测试使用
//        for ( i = 0; i < srcCtr.options.length; i++ ) {
//            if ( srcCtr.options[i].selected ) {
//                //alert( srcCtr.options[i].value );
//            }
//        }
    }
    // 清除所有已经选择的选项
    function clearSelectItems ( srcCtr ) ...{
        for ( i = 0; i < srcCtr.options.length; i++ ) ...{
            srcCtr.options[i].selected = false;
        }
    }
    // 调试信息方法
    function debug ( info ) ...{
        var descCtr = getElementByIdString ( "descCtr" );
    }
</ script >

         < select  id ="src"  name ="src"  multiple ="multiple"  onchange ="changeSelectItem(this)" >
             < option  value ="-1" > clear </ option >
             < option  value ="1" > a </ option >
             < option  value ="2"  selected ="selected" > b </ option >
             < option  value ="3" > c </ option >
             < option  value ="4" > d </ option >
             < option  value ="5"  selected ="selected" > e </ option >
             < option  value ="6" > f </ option >
         </ select >

         < input  type ="button"  value ="add to desc"  onclick ="moveSeleteItems('src', 'desc')"   />
         < input  type ="button"  value ="del from src"  onclick ="moveSeleteItems ('desc', 'src')"   />

         < input  type ="button"  value ="debug"  onclick ="debug ( 'information' )"   />

         < select  id ="desc"  name ="desc"  multiple ="multiple" onchange ="changeSelectItem('desc')" >
             < option  value ="-1" > clear </ option >
         </ select >



     </ body >

</ html >

 

今天自己动手写了一个从一个多选框将选项移动到另一多选框中的小代码...