下拉菜单的内容移动

14 篇文章 0 订阅

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script language=javascript>
// 加入已选
function Add() {
 var sel1=document.myform.d_b1;
 var sel2=document.myform.d_b2;
 if (sel1.selectedIndex<0) {
  alert("请选择一个待选按钮!");
  return;
 }
 sel2.options[sel2.length]=new Option(sel1.options[sel1.selectedIndex].innerHTML,sel1.options[sel1.selectedIndex].value);
}

// 从已选中删除
function Del() {
 var sel=document.myform.d_b2;
 var nIndex = sel.selectedIndex;
 var nLen = sel.length;
 if (nLen<1) return;
 if (nIndex<0) {
  alert("请选择一个已选按钮!");
  return;
 }
 for (var i=nIndex;i<nLen-1;i++) {
  sel.options[i].value=sel.options[i+1].value;
  sel.options[i].innerHTML=sel.options[i+1].innerHTML;
 }
 sel.length=nLen-1;
}

// 排序:向上移动
function Up() {
 var sel=document.myform.d_b2;
 var nIndex = sel.selectedIndex;
 var nLen = sel.length;
 if ((nLen<1)||(nIndex==0)) return;
 if (nIndex<0) {
  alert("请选择一个要移动的已选按钮!");
  return;
 }
 var sValue=sel.options[nIndex].value;
 var sHTML=sel.options[nIndex].innerHTML;
 sel.options[nIndex].value=sel.options[nIndex-1].value;
 sel.options[nIndex].innerHTML=sel.options[nIndex-1].innerHTML;
 sel.options[nIndex-1].value=sValue;
 sel.options[nIndex-1].innerHTML=sHTML;
 sel.selectedIndex=nIndex-1;
}

// 排序:向下移动
function Down() {
 var sel=document.myform.d_b2;
 var nIndex = sel.selectedIndex;
 var nLen = sel.length;
 if ((nLen<1)||(nIndex==nLen-1)) return;
 if (nIndex<0) {
  alert("请选择一个要移动的已选按钮!");
  return;
 }
 var sValue=sel.options[nIndex].value;
 var sHTML=sel.options[nIndex].innerHTML;
 sel.options[nIndex].value=sel.options[nIndex+1].value;
 sel.options[nIndex].innerHTML=sel.options[nIndex+1].innerHTML;
 sel.options[nIndex+1].value=sValue;
 sel.options[nIndex+1].innerHTML=sHTML;
 sel.selectedIndex=nIndex+1;
}

// 提交处理
function checkform() {
 var sel=document.myform.d_b2;
 var nLen = sel.length;
 var str="";
 for (var i=0;i<nLen;i++) {
  if (i>0) str+="|";
  str+=sel.options[i].value;
 }
 document.myform.d_button.value=str;
 return true;
}

</script>
</head>

<body>
<table border=0 cellpadding=5 cellspacing=0 align=center>
<form action='?' method=post name=myform>
<tr align=center><td>可选按钮</td><td></td><td>已选按钮</td><td></td></tr>
<tr align=center>
<td><select name='d_b1' size=20 style='width:200px' οndblclick='Add()'>
<option>1</option>
<option>2</option>
<option>3</option>
</select></td>
<td><input type=button name=b1 value=' → ' οnclick='Add()'><br><br><input type=button name=b1 value=' ← ' οnclick='Del()'></td>
<td><select name='d_b2' size=20 style='width:200px' οndblclick='Del()'>
<option>1</option>
<option>2</option>
<option>3</option>
</select></td>
<td><input type=button name=b3 value='↑' οnclick='Up()'><br><br><br><input type=button name=b4 value='↓' οnclick='Down()'></td>
</tr>
<input type=hidden name='d_button' value=''>
<tr><td colspan=4 align=right></td></tr>
</form></table>
</body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值