從一個多選框將選項移動到另一多選框中的js小程式碼
阿新 • • 發佈：2019-01-06
<?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 <meta name="title" content=""/> <meta name="author" content=""/> <meta name="subject" content=""/> <meta name="language" content="en"/> <meta name="keywords" content=""/>
<
#debugDiv { border: 1px solid red; background-color: gray;}
#debugDiv 
</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>