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

最新推荐文章于 2024-01-17 04:05:57 发布

edmond80

最新推荐文章于 2024-01-17 04:05:57 发布

阅读量443

点赞数

分类专栏： HTML 文章标签： javascript function input button html border

HTML 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

源码如下：

<!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();
}