📄 list.html
字号:
<html>
<HEAD>
<title>List控件</title>
<SCRIPT type="text/javascript" language="JavaScript" src="selectList.js">
</SCRIPT>
</HEAD>
<body>
<SCRIPT language="JavaScript">
function doSubmit(){
selectAll("selecteditems");
selectAll("selecteditems2");
}
</SCRIPT>
<form name="selectListForm" method="POST" action="/nop/pages/demo/selectlistaction.do">
<table WIDTH="71%" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<tr>
<td>
<div ALIGN="CENTER">
<strong>选择列表框</strong>
</div>
</td>
</tr>
<tr><td>
<center>
<table WIDTH='60%' BORDER='0' CELLSPACING='1' CELLPADDING='0'>
<tr><td ALIGN='left'>未选择</td><td><p align="center"></td>
<td width="283" ALIGN='left'>已选择</td></tr>
<tr> <td WIDTH='280' ROWSPAN='3'>
<select NAME='unselecteditems' SIZE='8' MULTIPLE='true'
ID='unselecteditems' style='width: 280; height: 130'
onchange='selectionChanged(document.all.unselecteditems,document.all.selecteditems,"toright"
,"movefrom_aa_unselecteditemsc23e64fdf24510c8aa437657d5454971","movefrom_aa_selecteditemsc23e64fdf24510c8aa437657d5454971");'>
</select></td>
<td><p align="center">
</td>
<td ROWSPAN='3'>
<select NAME='selecteditems' SIZE='8' MULTIPLE='true'
ID='selecteditems' style='width: 280; height: 130'
onchange='selectionChanged(document.all.selecteditems,document.all.unselecteditems,"toleft"
,"movefrom_aa_unselecteditemsc23e64fdf24510c8aa437657d5454971","movefrom_aa_selecteditemsc23e64fdf24510c8aa437657d5454971");'>
</select></td> </tr>
<tr><td WIDTH='48' ALIGN='CENTER' VALIGN='MIDDLE'>
<img SRC='/nop/pages/common/skins/template1/images/tables/arrowRight_disabled.gif'
NAME='movefrom_aa_unselecteditemsc23e64fdf24510c8aa437657d5454971' WIDTH='24' HEIGHT='24'
ID='movefrom_aa_unselecteditemsc23e64fdf24510c8aa437657d5454971'
onclick='moveSelected(document.all.unselecteditems,document.all.selecteditems,"toright"
,"movefrom_aa_unselecteditemsc23e64fdf24510c8aa437657d5454971","movefrom_aa_selecteditemsc23e64fdf24510c8aa437657d5454971");'
onmousedown="pushButton('movefrom_aa_unselecteditemsc23e64fdf24510c8aa437657d5454971',true);"
onmouseup="pushButton('movefrom_aa_unselecteditemsc23e64fdf24510c8aa437657d5454971',false);"
onmouseout="pushButton('movefrom_aa_unselecteditemsc23e64fdf24510c8aa437657d5454971',false);" > <br><br>
<img SRC='/nop/pages/common/skins/template1/images/tables/arrowLeft_disabled.gif'
NAME='movefrom_aa_selecteditemsc23e64fdf24510c8aa437657d5454971' WIDTH='24' HEIGHT='24'
ID='movefrom_aa_selecteditemsc23e64fdf24510c8aa437657d5454971'
onclick='moveSelected(document.all.selecteditems,document.all.unselecteditems,"toleft"
,"movefrom_aa_unselecteditemsc23e64fdf24510c8aa437657d5454971","movefrom_aa_selecteditemsc23e64fdf24510c8aa437657d5454971");'
onmousedown="pushButton('movefrom_aa_selecteditemsc23e64fdf24510c8aa437657d5454971',true);"
onmouseup="pushButton('movefrom_aa_selecteditemsc23e64fdf24510c8aa437657d5454971',false);"
onmouseout="pushButton('movefrom_aa_selecteditemsc23e64fdf24510c8aa437657d5454971',false);"> </td></tr>
<tr><td></td></tr></table>
</center>
</td></tr>
<tr><td>
<input type='radio' checked name='changedisplayc23e64fdf24510c8aa437657d5454971' onclick="changeDisplay('unselecteditems','selecteditems',aa_datac23e64fdf24510c8aa437657d5454971, 0)">显示方式一
<input type='radio' name='changedisplayc23e64fdf24510c8aa437657d5454971' onclick="changeDisplay('unselecteditems','selecteditems',aa_datac23e64fdf24510c8aa437657d5454971, 1)">显示方式二
</td></tr>
<Script Language='JavaScript'>
var aa_datac23e64fdf24510c8aa437657d5454971 = new Array();
var aa_available_datac23e64fdf24510c8aa437657d5454971 = new Array();
var aa_chosen_datac23e64fdf24510c8aa437657d5454971 = new Array();
aa_datac23e64fdf24510c8aa437657d5454971[0] = new Array();
aa_datac23e64fdf24510c8aa437657d5454971[0][0] = '111.111.111.111';
aa_datac23e64fdf24510c8aa437657d5454971[0][1] = 'IP address 1.';
aa_datac23e64fdf24510c8aa437657d5454971[0][2] = 'aaa';
aa_available_datac23e64fdf24510c8aa437657d5454971[0] =0;
aa_datac23e64fdf24510c8aa437657d5454971[1] = new Array();
aa_datac23e64fdf24510c8aa437657d5454971[1][0] = '222.222.222.222';
aa_datac23e64fdf24510c8aa437657d5454971[1][1] = 'IP address 2.';
aa_datac23e64fdf24510c8aa437657d5454971[1][2] = 'bbb';
aa_available_datac23e64fdf24510c8aa437657d5454971[1] =1;
aa_datac23e64fdf24510c8aa437657d5454971[2] = new Array();
aa_datac23e64fdf24510c8aa437657d5454971[2][0] = '333.333.333.333';
aa_datac23e64fdf24510c8aa437657d5454971[2][1] = 'IP address 3.';
aa_datac23e64fdf24510c8aa437657d5454971[2][2] = 'ccc';
aa_available_datac23e64fdf24510c8aa437657d5454971[2] =2;
aa_datac23e64fdf24510c8aa437657d5454971[3] = new Array();
aa_datac23e64fdf24510c8aa437657d5454971[3][0] = '444.444.444.444';
aa_datac23e64fdf24510c8aa437657d5454971[3][1] = 'IP address 4.';
aa_datac23e64fdf24510c8aa437657d5454971[3][2] = 'ddd';
aa_available_datac23e64fdf24510c8aa437657d5454971[3] =3;
aa_datac23e64fdf24510c8aa437657d5454971[4] = new Array();
aa_datac23e64fdf24510c8aa437657d5454971[4][0] = '555.555.555.555';
aa_datac23e64fdf24510c8aa437657d5454971[4][1] = 'IP address 5.';
aa_datac23e64fdf24510c8aa437657d5454971[4][2] = 'eee';
aa_chosen_datac23e64fdf24510c8aa437657d5454971[0] =4;
aa_datac23e64fdf24510c8aa437657d5454971[5] = new Array();
aa_datac23e64fdf24510c8aa437657d5454971[5][0] = '666.666.666.666';
aa_datac23e64fdf24510c8aa437657d5454971[5][1] = 'IP address 6.';
aa_datac23e64fdf24510c8aa437657d5454971[5][2] = 'fff';
aa_chosen_datac23e64fdf24510c8aa437657d5454971[1] =5;
buildData(document.all.selecteditems,aa_datac23e64fdf24510c8aa437657d5454971, aa_chosen_datac23e64fdf24510c8aa437657d5454971,0,2);
buildData(document.all.unselecteditems,aa_datac23e64fdf24510c8aa437657d5454971, aa_available_datac23e64fdf24510c8aa437657d5454971,0,2);
</Script>
<tr><td>
<center>
<table WIDTH='60%' BORDER='0' CELLSPACING='1' CELLPADDING='0'>
<tr><td ALIGN='left'>待选节点</td><td><p align="center"></td>
<td width="283" ALIGN='left'>已选节点</td></tr>
<tr> <td WIDTH='280' ROWSPAN='3'>
<select NAME='unselecteditems2' SIZE='8' MULTIPLE='true'
ID='unselecteditems2' style='width: 280; height: 130'
onchange='selectionChanged(document.all.unselecteditems2,document.all.selecteditems2,"toright"
,"movefrom_aa_unselecteditems5a0ba0d1dc235f7a307a6b6b179abf61","movefrom_aa_selecteditems5a0ba0d1dc235f7a307a6b6b179abf61");'>
</select></td>
<td><p align="center">
</td>
<td ROWSPAN='3'>
<select NAME='selecteditems2' SIZE='8' MULTIPLE='true'
ID='selecteditems2' style='width: 280; height: 130'
onchange='selectionChanged(document.all.selecteditems2,document.all.unselecteditems2,"toleft"
,"movefrom_aa_unselecteditems5a0ba0d1dc235f7a307a6b6b179abf61","movefrom_aa_selecteditems5a0ba0d1dc235f7a307a6b6b179abf61");'>
</select></td> </tr>
<tr><td WIDTH='48' ALIGN='CENTER' VALIGN='MIDDLE'>
<img SRC='/nop/pages/common/skins/template1/images/tables/arrowRight_disabled.gif'
NAME='movefrom_aa_unselecteditems5a0ba0d1dc235f7a307a6b6b179abf61' WIDTH='24' HEIGHT='24'
ID='movefrom_aa_unselecteditems5a0ba0d1dc235f7a307a6b6b179abf61'
onclick='moveSelected(document.all.unselecteditems2,document.all.selecteditems2,"toright"
,"movefrom_aa_unselecteditems5a0ba0d1dc235f7a307a6b6b179abf61","movefrom_aa_selecteditems5a0ba0d1dc235f7a307a6b6b179abf61");'
onmousedown="pushButton('movefrom_aa_unselecteditems5a0ba0d1dc235f7a307a6b6b179abf61',true);"
onmouseup="pushButton('movefrom_aa_unselecteditems5a0ba0d1dc235f7a307a6b6b179abf61',false);"
onmouseout="pushButton('movefrom_aa_unselecteditems5a0ba0d1dc235f7a307a6b6b179abf61',false);" > <br><br>
<img SRC='/nop/pages/common/skins/template1/images/tables/arrowLeft_disabled.gif'
NAME='movefrom_aa_selecteditems5a0ba0d1dc235f7a307a6b6b179abf61' WIDTH='24' HEIGHT='24'
ID='movefrom_aa_selecteditems5a0ba0d1dc235f7a307a6b6b179abf61'
onclick='moveSelected(document.all.selecteditems2,document.all.unselecteditems2,"toleft"
,"movefrom_aa_unselecteditems5a0ba0d1dc235f7a307a6b6b179abf61","movefrom_aa_selecteditems5a0ba0d1dc235f7a307a6b6b179abf61");'
onmousedown="pushButton('movefrom_aa_selecteditems5a0ba0d1dc235f7a307a6b6b179abf61',true);"
onmouseup="pushButton('movefrom_aa_selecteditems5a0ba0d1dc235f7a307a6b6b179abf61',false);"
onmouseout="pushButton('movefrom_aa_selecteditems5a0ba0d1dc235f7a307a6b6b179abf61',false);"> </td></tr>
<tr><td></td></tr></table>
</center>
</td></tr>
<tr><td>
<input type='radio' name='changedisplay5a0ba0d1dc235f7a307a6b6b179abf61' onclick="changeDisplay('unselecteditems2','selecteditems2',aa_data5a0ba0d1dc235f7a307a6b6b179abf61, 0)">显示方式一
</td></tr>
<Script Language='JavaScript'>
var aa_data5a0ba0d1dc235f7a307a6b6b179abf61 = new Array();
var aa_available_data5a0ba0d1dc235f7a307a6b6b179abf61 = new Array();
var aa_chosen_data5a0ba0d1dc235f7a307a6b6b179abf61 = new Array();
aa_data5a0ba0d1dc235f7a307a6b6b179abf61[0] = new Array();
aa_data5a0ba0d1dc235f7a307a6b6b179abf61[0][0] = '777.777.777.777';
aa_data5a0ba0d1dc235f7a307a6b6b179abf61[0][1] = 'IP address 7.';
aa_data5a0ba0d1dc235f7a307a6b6b179abf61[0][2] = 'ggg';
aa_available_data5a0ba0d1dc235f7a307a6b6b179abf61[0] =0;
aa_data5a0ba0d1dc235f7a307a6b6b179abf61[1] = new Array();
aa_data5a0ba0d1dc235f7a307a6b6b179abf61[1][0] = '888.888.888.888';
aa_data5a0ba0d1dc235f7a307a6b6b179abf61[1][1] = 'IP address 8.';
aa_data5a0ba0d1dc235f7a307a6b6b179abf61[1][2] = 'hhh';
aa_available_data5a0ba0d1dc235f7a307a6b6b179abf61[1] =1;
aa_data5a0ba0d1dc235f7a307a6b6b179abf61[2] = new Array();
aa_data5a0ba0d1dc235f7a307a6b6b179abf61[2][0] = '999.999.999.999';
aa_data5a0ba0d1dc235f7a307a6b6b179abf61[2][1] = 'IP address 9.';
aa_data5a0ba0d1dc235f7a307a6b6b179abf61[2][2] = 'iii';
aa_available_data5a0ba0d1dc235f7a307a6b6b179abf61[2] =2;
aa_data5a0ba0d1dc235f7a307a6b6b179abf61[3] = new Array();
aa_data5a0ba0d1dc235f7a307a6b6b179abf61[3][0] = '10.10.10.10';
aa_data5a0ba0d1dc235f7a307a6b6b179abf61[3][1] = 'IP address 10.';
aa_data5a0ba0d1dc235f7a307a6b6b179abf61[3][2] = 'jjj';
aa_available_data5a0ba0d1dc235f7a307a6b6b179abf61[3] =3;
buildData(document.all.selecteditems2,aa_data5a0ba0d1dc235f7a307a6b6b179abf61, aa_chosen_data5a0ba0d1dc235f7a307a6b6b179abf61,2,2);
buildData(document.all.unselecteditems2,aa_data5a0ba0d1dc235f7a307a6b6b179abf61, aa_available_data5a0ba0d1dc235f7a307a6b6b179abf61,2,2);
</Script>
<tr>
<td>
<input type="submit" name="btn" value="确定" onclick="doSubmit()">
</td>
</tr>
</table>
</form>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -