关闭

双复选下拉列表示例

741人阅读 评论(0) 收藏 举报
<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="添加表" onclick="javascript:add_selected_to_right()">
<br>
<br>
<br>
<br>
<input type="button" name="Submit2" value="移除表" onclick="javascript:del_selected_from_right()">
<br>
<br>
<input type="button" name="Submit2" value="添加所有表" onclick="javascript:add_all_from_left()">
<br>
<br>
<input type="button" name="Submit2" value="移除所有表" onclick="javascript:del_all_from_right()">
<br>
<br>
<input type="button" name="Submit2" value="上移" onclick="javascript:up()">
<br>
<br>
<input type="button" name="Submit2" value="下移" onclick="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>
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:78879次
    • 积分:959
    • 等级:
    • 排名:千里之外
    • 原创:5篇
    • 转载:43篇
    • 译文:0篇
    • 评论:18条
    文章分类
    最新评论