雙複選下拉列表示例

<head>
<LINK href='images/css.css' type=text/css rel=stylesheet>
<title>表的排序</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<LINK href="images/common.css" type=text/css rel=stylesheet>
</head>
<script language="JavaScript">


function add_selected_to_right(){
if (document.all.system_table.length>0) {
for (i=0; i<document.all.system_table.length; i++){
if(document.all.system_table.options[i].selected==true){
if(document.all.system_table.options[i].value!=""){
var oOption = document.createElement("OPTION");
oOption.text=document.all.system_table.options[i].text;
oOption.value=document.all.system_table.options[i].value;
document.all.selected_table.add(oOption);
}
}
}
}
}

function del_selected_from_right(){
if (document.all.selected_table.length>0) {
for (i=document.all.selected_table.length-1;i>=0;i--){
if(document.all.selected_table.options[i].selected==true){
if(document.all.selected_table.options[i].value!=""){
document.all.selected_table.options.remove(i);
}
}
}
}
}
function add_all_from_left(){
if (document.all.selected_table.length>0) {
for (i=document.all.selected_table.length-1;i>=0;i--){
if(document.all.selected_table.options[i].value!=""){
document.all.selected_table.options.remove(i);
}
}
}
if (document.all.system_table.length>0) {
for (i=0;i<=document.all.system_table.length-1;i++){
if(document.all.system_table.options[i].value!=""){
var oOption = document.createElement("OPTION");
oOption.text=document.all.system_table.options[i].text;
oOption.value=document.all.system_table.options[i].value;
document.all.selected_table.add(oOption);
}
}
}
}
function del_all_from_right(){
if (document.all.selected_table.length>0) {
for (i=document.all.selected_table.length-1;i>=0;i--){
if(document.all.selected_table.options[i].value!=""){
document.all.selected_table.options.remove(i);
}
}
}
}
function up(){
if (document.all.selected_table.length>0) {
for (i=0; i<document.all.selected_table.length; i++){
if(document.all.selected_table.options[i].selected==true && i!=0){
if(document.all.selected_table.options[i].value!=""){
var oOption = document.createElement("OPTION");
oOption.text=document.all.selected_table.options[i].text;
oOption.value=document.all.selected_table.options[i].value;

document.all.selected_table.options[i].text=document.all.selected_table.options[i-1].text;
document.all.selected_table.options[i].value=document.all.selected_table.options[i-1].value;

document.all.selected_table.options[i-1].text=oOption.text;
document.all.selected_table.options[i-1].value=oOption.value;
document.all.selected_table.options[i-1].selected=true;

}
}
}
}

}
function down(){
if (document.all.selected_table.length>0) {
for (i=document.all.selected_table.length-1; i>=0; i--){
if(document.all.selected_table.options[i].selected==true && i!=document.all.selected_table.length-1){
if(document.all.selected_table.options[i].value!=""){
var oOption = document.createElement("OPTION");
oOption.text=document.all.selected_table.options[i].text;
oOption.value=document.all.selected_table.options[i].value;

document.all.selected_table.options[i].text=document.all.selected_table.options[i+1].text;
document.all.selected_table.options[i].value=document.all.selected_table.options[i+1].value;

document.all.selected_table.options[i+1].text=oOption.text;
document.all.selected_table.options[i+1].value=oOption.value;
document.all.selected_table.options[i+1].selected=true;

}
}
}
}

}

</script>

<BODY>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="50">&nbsp;</td>
<td width="500" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="200"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="table">系統的表</td>
</tr>
<tr>
<td><select name="system_table" size="20" style="width:200px" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select></td>
</tr>
</table></td>
<td><div align="center">
<input type="button" name="Button" value="添加表" οnclick="javascript:add_selected_to_right()">
<br>
<br>
<br>
<br>
<input type="button" name="Submit2" value="移除表" οnclick="javascript:del_selected_from_right()">
<br>
<br>
<input type="button" name="Submit2" value="添加所有表" οnclick="javascript:add_all_from_left()">
<br>
<br>
<input type="button" name="Submit2" value="移除所有表" οnclick="javascript:del_all_from_right()">
<br>
<br>
<input type="button" name="Submit2" value="上移" οnclick="javascript:up()">
<br>
<br>
<input type="button" name="Submit2" value="下移" οnclick="javascript:down()">
</div></td>
<td width="200" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="table">排序的表</td>
</tr>
<tr>
<td><form name='selected' action="table_taxis.jsp" method="post"><select name="selected_table" size="20" style="width:200px">
</select>
</form></td>
</tr>
</table>
</td>
</tr>
</table></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>

</BODY>
發佈了4 篇原創文章 · 獲贊 4 · 訪問量 9萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章