<?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{
                
returnnull;
            }

        }
else{
            
returnnull;
        }

    }




    
// 將選項從一個選擇框移動到另一個選擇框中
function moveSeleteItems ( srcCtr, descCtr ) {
        
var srcCtr = getElementByIdString ( srcCtr );
        
var descCtr = getElementByIdString ( descCtr );
        
if ( srcCtr ===null|| descCtr ===null ) {
            
returnfalse;
        }

        
if ( srcCtr.selectedIndex <0 ) returnfalse; }
        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 );
            
returntrue;
        }


//        // 測試使用
//
        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>