两个列表框的选项转移与排序

作者：kts2tt 来源：不详整理日期：2007-7-14

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>两个列表框的选项转移与排序</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>

</style>
</head>
<body>
<br>
<center><h1><font color=#ff0000>笔记本</font>主要属性设定</h1></center>
<table border="0">
<tr align=center>
<td><h3>笔记本属性列表</h3></td>
<td><h3>操作</h3></td>
<td><h3>笔记本主要属性</h3></td>
<td><h3>主要属性重新排序</h3></td>
</tr>
<form name="form_category" method="post" onSubmit="allSelect()">
<tr>
  <td valign=top>
   <select name="possible" MULTIPLE width=200 style="width: 200px;">
    <option value="1">设计类型</option>
    <option value="2">产品类型</option>
    <option value="3">CPU类型</option>
    <option value="4">迅驰技术</option>
    <option value="5">标称频率</option>
    <option value="6">CPU描述</option>
    <option value="7">二级缓存</option>
    <option value="8">主板描述</option>
    <option value="9">屏幕尺寸</option>
    <option value="10">是否宽屏</option>
    <option value="11">内存大小</option>
    <option value="12">硬盘大小</option>
    <option value="9">屏幕尺寸</option>
    <option value="10">是否宽屏</option>
    <option value="11">内存大小</option>
    <option value="12">硬盘大小</option>
   </select>
  </td>
  <td>
  <a href="javascript:copyToList(possible,chosen)">添加至主要属性--></a><br>
  <br>
  <a href="javascript:copyToList(chosen,possible)"><--从主要属性移除</a></td>
  <td valign=top>
   <select name="chosen" width=200 style="width: 200px;">
    <option value="temp">从左边选择属性</option>
   </select>
  </td>
     <td align=center>
    <a href="javascript:;" onClick="doTopItem()">移到最上面</a><br />
    <a href="javascript:;" onClick="doUpItem()">向上移动</a><br />
    <a href="javascript:;" onClick="doDownItem()">向下移动</a><br />
    <a href="javascript:;" onClick="doBottomItem()">移到最下面</a>
   </td>
</tr>
</form>
<tr>
  <td colspan="4">
   <div align="center">
   <input type="button" value="保存" onClick="doSubmit()">
      
   <input type="button" value="重置" onClick="doRe()">
   <input type="hidden" name="items" value="">
   </div>
  </td>
</tr>
</table>
<span id=shownum></span>
<SCRIPT LANGUAGE="javascript">
document.getElementById("possible").size=document.getElementById("possible").length;
//go top
function doTopItem(){
var seqSelect=document.getElementById(chosen);
var length=seqSelect.size;
var topV,topT;
var tempV=new Array();
var tempT=new Array();
for(var i=0;i<length;i++){
if(seqSelect.options[i].selected){
   if(i==0)
     return false;
   topV=seqSelect.options[0].value;
   topT=seqSelect.options[0].text;
   seqSelect.options[0].value=seqSelect.options[i].value;
   seqSelect.options[0].text=seqSelect.options[i].text;

   for(var j=1;j<length;j++){
    tempV[j]=seqSelect.options[j].value;
    tempT[j]=seqSelect.options[j].text;
    if(j==1){
    seqSelect.options[1].value=topV;
    seqSelect.options[1].text=topT;
    }
    else if(j>i){
     break;
    }else{
    seqSelect.options[j].value=tempV[j-1];
    seqSelect.options[j].text=tempT[j-1];
    }
   }

   }
}
seqSelect.options[0].selected=true;
}

//go bottom
function doBottomItem(){
var seqSelect=document.getElementById(chosen);
var length=seqSelect.size;
   var bottomV,bottomT;
var tempV=new Array();
var tempT=new Array();
for(var i=0;i<length;i++){
  if(seqSelect.options[i].selected){
   if(i==(length-1))
    return false;
   bottomV=seqSelect.options[length-1].value;
   bottomT=seqSelect.options[length-1].text;
   seqSelect.options[length-1].value=seqSelect.options[i].value;
   seqSelect.options[length-1].text=seqSelect.options[i].text;

    for(var j=length-2;j>=0;j--){
    tempV[j]=seqSelect.options[j].value;
    tempT[j]=seqSelect.options[j].text;
    if(j==(length-2)){
    seqSelect.options[length-2].value=bottomV;
    seqSelect.options[length-2].text=bottomT;
    }
    else if(j<i){
     break;
    }
     else{
    seqSelect.options[j].value=tempV[j+1];
    seqSelect.options[j].text=tempT[j+1];
    }
   }

   }
}
seqSelect.options[length-1].selected=true;
}

//go up 1
function doUpItem(){
var seqSelect=document.getElementById(chosen);
var length=seqSelect.size;
var tempV,tempT;
for(var i=0;i<length;i++){
  if(seqSelect.options[i].selected){
   if(i==0)
    return false;
   tempV=seqSelect.options[i-1].value;
   tempT=seqSelect.options[i-1].text;
   seqSelect.options[i-1].value=seqSelect.options[i].value;
   seqSelect.options[i-1].text=seqSelect.options[i].text;
   seqSelect.options[i].value=tempV;
   seqSelect.options[i].text=tempT;
   seqSelect.options[i-1].selected=true;
   break;
  }
}
}

//go down 1
function doDownItem(){
var seqSelect=document.getElementById(chosen);
var length=seqSelect.size;
var tempV,tempT;
for(var i=0;i<length;i++){
  if(seqSelect.options[i].selected){
   if(i==(length-1))
    return false;
   tempV=seqSelect.options[i+1].value;
   tempT=seqSelect.options[i+1].text;
   seqSelect.options[i+1].value=seqSelect.options[i].value;
   seqSelect.options[i+1].text=seqSelect.options[i].text;
   seqSelect.options[i].value=tempV;
   seqSelect.options[i].text=tempT;
   seqSelect.options[i+1].selected=true;
   break;
  }
}
shownum.innerHtml=length;
}

//get value
function doSubmit(){
var seqSelect=document.getElementById(chosen);
var length=seqSelect.size;
var items="";
for(var i=0;i<length;i++){
  if(i==0){
   items=seqSelect.options[i].value;
  }else{
   items=items+"||"+seqSelect.options[i].value;
  }
}
document.form_category.items.value=items;
document.form_category.action="data.aspx";
document.form_category.submit();
}

function doRe(){
var seqSelect=document.getElementById(chosen);
var length=seqSelect.size;
document.form_category.action="";
document.form_category.submit();
}
////////////////////////////////////
function copyToList(from,to){
//from表示:包含可选择项目的select对象名字 to表示:列出可选择项目的select对象名字 //你可以根据你的具体情况修改
fromList = eval(document.form_category. + from);
toList = eval(document.form_category. + to);
if (toList.options.length > 0 && toList.options[0].value == temp)
{
    toList.options.length = 0;
}
var sel = false;
for (i=0;i<fromList.options.length;i++)
{
    var current = fromList.options[i];
    if (current.selected)
    {
      sel = true;
      if (current.value == temp)
      {
        alert (你不能选择这个项目!);
        return;
      }
      txt = current.text;
      val = current.value;
      toList.options[toList.length] = new Option(txt,val);
      fromList.options[i] = null;
      i--;
    }
}
fromList.size=fromList.length;
toList.size=toList.length;
if (!sel) alert (你还没有选择任何项目);
}
function allSelect(){
//这是当用户按下提交按钮时，对列出选择的select对象执行全选工作，让递交至的后台程序能取得相关数据
List = document.form_category.chosen;
if (List.length && List.options[0].value == temp) return;
for (i=0;i<List.length;i++)
{
     List.options[i].selected = true;
}
}
</SCRIPT>
</body>
</html>

【相关文章】

暂无