急！怎样改变下拉列表项的位置

<select name="select" size="6" id='sel'>
    <option value="1" selected>one</option>
    <option value="2">two</option>
    <option value="3">three</option>
<option value="4">four</option>
<option value="5">five</option>
<option value="6">six</option>
  </select>
<input type="button" value="上移" onclick="move(2)"/>
<input type="button" value="下移" onclick="move(1)"/>
<script language="javascript">

</script>

用楼上的方法，给段代码，你研究一下。介绍：这是一个操作select列表框比较全的脚本，可以进行相互之间的转移，单个之间的上下排序、删除等功能。
<html>
<head>
<SCRIPT language="javascript">
/***************************************************************************************************************
//more javascript from http://www.smallrain.net
* 创建时间：2004.6.23
* 创建人：LxcJie
* 文件描述：关于list列表框的一些工具方法
*
* 主要方法：
*          1， moveUp(oSelect,isToTop) －－－－－－－－－－－－向上移动一个list列表框的选中项目，
*                                                                可以支持多选移动，可以设置是否移动到顶层
*          2， moveDown(oSelect,isToBottom)－－－－－－－－－－向下移动一个list列表框的选中项目，
*                                                                可以支持多选移动，可以设置是否移动到底层
*          3， moveSelected(oSourceSel,oTargetSel) －－－－－－在两个列表框之间转移数据
*          4， moveAll(oSourceSel,oTargetSel)－－－－－－－－－转移两个列表框之间的全部数据
*          5， deleteSelectItem(oSelect) －－－－－－－－－－－删除所选的项目
*
****************************************************************************************************************/

/**
* 使选中的项目上移
*
* oSelect: 源列表框
* isToTop: 是否移至选择项到顶端，其它依次下移，
*          true为移动到顶端，false反之，默认为false
*/
function moveUp(oSelect,isToTop){
    //默认状态不是移动到顶端
    if(isToTop == null)
        var isToTop = false;

    //如果是多选------------------------------------------------------------------
    if(oSelect.multiple)
    {
        for(var selIndex=0; selIndex<oSelect.options.length; selIndex++)
        {
            //如果设置了移动到顶端标志
            if(isToTop)
            {
                if(oSelect.options[selIndex].selected)
                {
                    var transferIndex = selIndex;
                    while(transferIndex > 0 && !oSelect.options[transferIndex - 1].selected)
                    {
                        oSelect.options[transferIndex].swapNode(oSelect.options[transferIndex - 1]);
                        transferIndex --;
                    }
                }
            }
            //没有设置移动到顶端标志
            else
            {
                if(oSelect.options[selIndex].selected)
                {
                    if(selIndex > 0)
                    {
                        if(!oSelect.options[selIndex - 1].selected)
                            oSelect.options[selIndex].swapNode(oSelect.options[selIndex - 1]);
                    }
                }
            }
        }
    }
    //如果是单选--------------------------------------------------------------------
    else
    {
        var selIndex = oSelect.selectedIndex;
        if(selIndex <= 0)
            return;
        //如果设置了移动到顶端标志
        if(isToTop)
        {
            while(selIndex > 0)
            {
                oSelect.options[selIndex].swapNode(oSelect.options[selIndex - 1]);
                selIndex --;
            }
        }
        //没有设置移动到顶端标志
        else
            oSelect.options[selIndex].swapNode(oSelect.options[selIndex - 1]);
    }
}/**
* 使选中的项目下移
*
* oSelect: 源列表框
* isToTop: 是否移至选择项到底端，其它依次上移，
*          true为移动到底端，false反之，默认为false
*/
function moveDown(oSelect,isToBottom){
    //默认状态不是移动到顶端
    if(isToBottom == null)
        var isToBottom = false;

    var selLength = oSelect.options.length - 1;

    //如果是多选------------------------------------------------------------------
    if(oSelect.multiple)
    {
        for(var selIndex=oSelect.options.length - 1; selIndex>= 0; selIndex--)
        {
            //如果设置了移动到顶端标志
            if(isToBottom)
            {
                if(oSelect.options[selIndex].selected)
                {
                    var transferIndex = selIndex;
                    while(transferIndex < selLength && !oSelect.options[transferIndex + 1].selected)
                    {
                        oSelect.options[transferIndex].swapNode(oSelect.options[transferIndex + 1]);
                        transferIndex ++;
                    }
                }
            }
            //没有设置移动到顶端标志
            else
            {
                if(oSelect.options[selIndex].selected)
                {
                    if(selIndex < selLength)
                    {
                        if(!oSelect.options[selIndex + 1].selected)
                            oSelect.options[selIndex].swapNode(oSelect.options[selIndex + 1]);
                    }
                }
            }
        }
    }
    //如果是单选--------------------------------------------------------------------
    else
    {
        var selIndex = oSelect.selectedIndex;
        if(selIndex >= selLength - 1)
            return;
        //如果设置了移动到顶端标志
        if(isToBottom)
        {
            while(selIndex < selLength - 1)
            {
                oSelect.options[selIndex].swapNode(oSelect.options[selIndex + 1]);
                selIndex ++;
            }
        }
        //没有设置移动到顶端标志
        else
            oSelect.options[selIndex].swapNode(oSelect.options[selIndex + 1]);
    }
}/**
* 移动select的部分内容,必须存在value，此函数以value为标准进行移动
*
* oSourceSel: 源列表框对象
* oTargetSel: 目的列表框对象
*/
function moveSelected(oSourceSel,oTargetSel){
    //建立存储value和text的缓存数组
    var arrSelValue = new Array();
    var arrSelText = new Array();
    //此数组存贮选中的options，以value来对应
    var arrValueTextRelation = new Array();
    var index = 0;//用来辅助建立缓存数组

    //存储源列表框中所有的数据到缓存中，并建立value和选中option的对应关系
    for(var i=0; i<oSourceSel.options.length; i++)
    {
        if(oSourceSel.options[i].selected)
        {
            //存储
            arrSelValue[index] = oSourceSel.options[i].value;
            arrSelText[index] = oSourceSel.options[i].text;
            //建立value和选中option的对应关系
            arrValueTextRelation[arrSelValue[index]] = oSourceSel.options[i];
            index ++;
        }
    }

    //增加缓存的数据到目的列表框中，并删除源列表框中的对应项
    for(var i=0; i<arrSelText.length; i++)
    {
        //增加
        var oOption = document.createElement("option");
        oOption.text = arrSelText[i];
        oOption.value = arrSelValue[i];
        oTargetSel.add(oOption);
        //删除源列表框中的对应项
        oSourceSel.removeChild(arrValueTextRelation[arrSelValue[i]]);
    }
}

/**
* 移动select的整块内容
*
* oSourceSel: 源列表框对象
* oTargetSel: 目的列表框对象
*/
function moveAll(oSourceSel,oTargetSel){
    //建立存储value和text的缓存数组
    var arrSelValue = new Array();
    var arrSelText = new Array();

    //存储所有源列表框数据到缓存数组
    for(var i=0; i<oSourceSel.options.length; i++)
    {
        arrSelValue[i] = oSourceSel.options[i].value;
        arrSelText[i] = oSourceSel.options[i].text;
    }

    //将缓存数组的数据增加到目的select中
    for(var i=0; i<arrSelText.length; i++)
    {
        var oOption = document.createElement("option");
        oOption.text = arrSelText[i];
        oOption.value = arrSelValue[i];
        oTargetSel.add(oOption);
    }

    //清空源列表框数据，完成移动
    oSourceSel.innerHTML = "";
}/**
* 删除选定项目
*
* oSelect: 源列表框对象
*/
function deleteSelectItem(oSelect){
    for(var i=0; i<oSelect.options.length; i++)
    {
        if(i>=0 && i<=oSelect.options.length-1 && oSelect.options[i].selected)
        {
            oSelect.options[i] = null;
            i --;
        }
    }
}//js文件完毕
</SCRIPT>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建网页 1</title>
</head>
<body background="200411822562825089.jpg">
<FORM name="form1" method="post" action="">
  <SELECT name="left" size="10" id="select" multiple style="width:100px; ">
    <OPTION value="aaaaa">aaaaa</OPTION>
    <OPTION value="bbbbb">bbbbb</OPTION>
    <OPTION value="ccccc">ccccc</OPTION>
  </SELECT>
  <INPUT style="border:1px solid black " type="button" value=">>>" onClick="moveSelected(document.all.left,document.all.right)">
  <INPUT style="border:1px solid black " type="button" value="<<<" onClick="moveSelected(document.all.right,document.all.left)">
  <SELECT name="right" size="10" id="select" multiple style="width:100px; ">
    <OPTION value="ddddd">ddddd</OPTION>
    <OPTION value="eeeee">eeeee</OPTION>
    <OPTION value="fffff">fffff</OPTION>
    <OPTION value="ggggg">ggggg</OPTION>
    <OPTION value="hhhhh">hhhhh</OPTION>
    <OPTION value="iiiii">iiiii</OPTION>
  </SELECT>
  <br>
  <br>
  <br>
  <br>
  <DIV style="background-color:#CCCCCC;padding:2px">
    <INPUT style="border:1px solid black " type="button" value="上移一格" onClick="moveUp(document.all.right);moveUp(document.all.left)">
    <INPUT style="border:1px solid black " type="button" value="下移一格" onClick="moveDown(document.all.right);moveDown(document.all.left)">
    <INPUT style="border:1px solid black " type="button" value="上移到顶"
onClick="moveUp(document.all.right,true);moveUp(document.all.left,true)">
    <INPUT style="border:1px solid black " type="button" value="下移到顶"
onClick="moveDown(document.all.right,true);moveDown(document.all.left,true);">
    （支持多选移动） </DIV>
  <BR>
  <BR>
  <DIV style="background-color:#CCCCCC; padding:5px; width:100%; position:relative"> 右移：
    <INPUT type="radio" name="ifAll" value="right" checked>
    <br>
    左移：
    <INPUT type="radio" name="ifAll" value="left">
    <br>
    <br>
    <INPUT type="button" value="移动全部" style="border:1px solid black " onClick="judgeMove()">
  </DIV>
  <br>
  <br>
  <DIV style="background-color:#CCCCCC; padding:5px">
    <INPUT type="button" value=" 删除 " style="border:1px solid black "
onClick="deleteSelectItem(document.all.left);deleteSelectItem(document.all.right)">
  </div>
</FORM>
</BODY>
<SCRIPT language="javascript">
function judgeMove(){
    var arrRadio = document.all.ifAll;
    var valOfRadio;
    for(var i=0; i<arrRadio.length; i++)
    {
        if(arrRadio[i].checked)
        {
            valOfRadio = arrRadio[i].value;
            break;
        }
    }
    if(valOfRadio == "left")
        moveAll(document.all.right,document.all.left);
    if(valOfRadio == "right")
        moveAll(document.all.left,document.all.right);
}
</SCRIPT>
</body>
</html>

<HTML>
<HEAD><TITLE>THIS IS A TEST</TITLE>
<BODY>
<select id='sel'>
<option value='1'>1
<option value='2'>2
<option value='3'>3
<option value='4'>4
<option value='5'>5
</select>
<input type='button' onclick='changeNode()'>
<SCRIPT LANGUAGE="JavaScript">
function changeNode(){
    sele = document.getElementById("sel");
    index = sele.selectedIndex;
    sele.options[index].swapNode(sele.options[index-1]);
}
</SCRIPT>
</BODY>
</HTML>

<body>
<select id="container" size="5">
<option value="111">111</option>
<option value="222">222</option>
<option value="333">333</option>
<option value="444">444</option>
<option value="555">555</option>
</select>
<script type="text/javascript">
var obj=document.getElementById("container");
obj.onkeydown=function()
{
var index=obj.selectedIndex;
var tempText=obj.options[index].text;
var tempValue=obj.options[index].value;
if(event.keyCode==38) //up
{
if(index>0)
{
obj.options[index].value=obj.options[index-1].value;
obj.options[index].text=obj.options[index-1].text;
obj.options[index-1].value=tempValue;
obj.options[index-1].text=tempText;
}
}
else if(event.keyCode==40) //down
{
if(index<obj.options.length-1)
{
obj.options[index].value=obj.options[index+1].value;
obj.options[index].text=obj.options[index+1].text;
obj.options[index+1].value=tempValue;
obj.options[index+1].text=tempText;
}
}
}
</script>
</body>

调试易

急！怎样改变下拉列表项的位置

解决方案 »