<!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>
扫一扫
900
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
