<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>MyHtml.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <script type="text/javascript"><!-- function moveSelectedItem(sourceId,destId){ var source = document.getElementById(sourceId); var dest = document.getElementById(destId); if( source.selectedIndex < 0 ){ return; } var selectedOption = source.options[source.selectedIndex]; var newOption = document.createElement("OPTION"); newOption.value = selectedOption.value; newOption.innerHTML=selectedOption.innerHTML; dest.insertBefore(newOption); source.removeChild(selectedOption); } function moveUp(sourceId){ var source = document.getElementById(sourceId); if( source.selectedIndex < 1 ) { return; } var sIndex = source.selectedIndex; var ops = []; var op = source.options[sIndex]; var op2 =source.options[sIndex - 1]; var ll = source.options.length; for( var i = 0 ; i < ll ; i ++ ){ ops[i] = source.options[0]; source.removeChild(source.options[0]); } for( var i = 0 ; i < ll ; i ++ ){ if( ops[i] == op ) { source.insertBefore(op); source.insertBefore(op2); } else if( ops[i] == op2 ){ } else { source.insertBefore(ops[i]); } } } function moveDown(sourceId){ var source = document.getElementById(sourceId); if( source.selectedIndex < 0 || source.selectedIndex >= source.options.length-1 ) { return; } var sIndex = source.selectedIndex; var ops = []; var op = source.options[sIndex]; var op2 =source.options[sIndex + 1]; var ll = source.options.length; for( var i = 0 ; i < ll ; i ++ ){ ops[i] = source.options[0]; source.removeChild(source.options[0]); } for( var i = 0 ; i < ll ; i ++ ){ if( ops[i] == op ) { source.insertBefore(op2); source.insertBefore(op); } else if( ops[i] == op2 ){ } else { source.insertBefore(ops[i]); } } } function showSelectValues(){ var s1 = ""; var t = document.getElementById('select1').options; for( var i = 0 ; i < t.length ; i ++ ){ var o = t[i]; s1 += o.value + ","; } alert(s1); s1 = ""; t = document.getElementById('select2').options; for( var i = 0 ; i < t.length ; i ++ ){ var o = t[i]; s1 += o.value + ","; } alert(s1); s1 = ""; t = document.getElementById('select3').options; for( var i = 0 ; i < t.length ; i ++ ){ var o = t[i]; s1 += o.value + ","; } alert(s1); return false; } --></script> </head> <body> <form οnsubmit="showSelectValues();"> <table> <tr><td> <select id="select1" multiple="multiple" size="8"> <option value="x" id="o1">xxxxx</option> <option value="y">yyyyy</option> <option value="z">zzzzz</option> </select> </td><td> <table> <tr><td><button οnclick="moveUp('select1');"> ^. </button></td></tr> <tr><td><button οnclick="moveDown('select1');"> v. </button></td></tr> <tr><td><button οnclick="moveSelectedItem('select1','select2');"> -> </button></td></tr> <tr><td><button οnclick="moveSelectedItem('select2','select1');"> <- </button></td></tr> </table> </td><td> <select id="select2" multiple="multiple" size="8" > <option value="a">aaaaa</option> <option value="b">bbbbb</option> <option value="c">ccccc</option> </select> </td><td> <table> <tr><td><button οnclick="moveUp('select2');"> ^. </button></td></tr> <tr><td><button οnclick="moveDown('select2');"> v. </button></td></tr> <tr><td><button οnclick="moveSelectedItem('select2','select3');"> -> </button></td></tr> <tr><td><button οnclick="moveSelectedItem('select3','select2');"> <- </button></td></tr> </table> </td><td> <select id="select3" multiple="multiple" size="8"> <option value="m">mmmmm</option> <option value="n">nnnnn</option> <option value="u">uuuuu</option> </select> </td><td><table> <tr><td><button οnclick="moveUp('select3');"> ^. </button></td></tr> <tr><td><button οnclick="moveDown('select3');"> v. </button></td></tr> </table></td></tr> </table> <input type="submit"> </form> </body></html>
