js 下拉框问题?

示例：看一下是不是你想要的
<form name=form1>
<SELECT NAME="aaaa">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</SELECT>
<INPUT TYPE="button" name="sss" value="向下" onclick="down()"><INPUT TYPE="button" name="ssss" value="向上" onclick="up()">
</form>
<script>
function down()
{
if(document.form1.aaaa.selectedIndex<document.form1.aaaa.length-1){
alert(document.form1.aaaa.selectedIndex+"++"+document.form1.aaaa.length)
document.form1.aaaa[(document.form1.aaaa.selectedIndex+1)].selected=true
}
}
function up()
{
if(document.form1.aaaa.selectedIndex>0)
document.form1.aaaa[(document.form1.aaaa.selectedIndex-1)].selected=true
}
</script>

解决方案 »

  1.   

    刚才多加了一句测试的语句，去掉了
    <form name=form1>
    <SELECT NAME="aaaa">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    </SELECT>
    <INPUT TYPE="button" name="sss" value="向下" onclick="down()"><INPUT TYPE="button" name="ssss" value="向上" onclick="up()">
    </form>
    <script>
    function down()
    {
    if(document.form1.aaaa.selectedIndex<document.form1.aaaa.length-1){
    document.form1.aaaa[(document.form1.aaaa.selectedIndex+1)].selected=true
    }
    }
    function up()
    {
    if(document.form1.aaaa.selectedIndex>0)
    document.form1.aaaa[(document.form1.aaaa.selectedIndex-1)].selected=true
    }
    </script>
      

  2.   

    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Page Selection</title>
    <style>
    td{white-space:nowrap};
    body{margin-left:0;margin-right:0;margin-top=0;margin-bottom=0};
    </style>
    </head><body bgcolor=eeeeee><table>
    <tr > 
    <td> 
    <select name=SrcSelect size=6 style="font-size:11pt;width=200;height=160px" multiple > 
    <option value="1">test1</option> 
    <option value="2">test2</option> 
    <option value="3">test3</option> 
    <option value="4">test4</option> 
    <option value="5">test5</option> 
    <option value="6">test6</option> 
    </select>
    </td> 
    <td align="center">    
    <input align="left" type=button value="→"  onclick="moveLeftOrRight(document.all.SrcSelect,document.all.ObjSelect)"  ><br><br>
    <input align="left" type=button value="←"  onclick="moveLeftOrRight(document.all.ObjSelect,document.all.SrcSelect)"  >
    </td>
    <td> 
    <select name=ObjSelect size=6 style="font-size:11pt;width=200;height=160px" multiple > 
    <option value="11">test11</option> 
    <option value="12">test12</option> 
    <option value="13">test13</option> 
    <option value="14">test14</option> 
    <option value="15">test15</option> 
    <option value="16">test16</option> 
    </select>
    </td> 
    <td>
    <input type=button value="↑"  onclick="moveUp()" ><br><br>
    <input type=button value="↓"  onclick="moveDown()" >
    </td>
    </tr> 
    </table>
    </body>  
      
    <script language=javascript>  
    function moveUp()  
    { 
    var theObj=document.all.ObjSelect;
    for(var i=1;i<theObj.length;i++)
    {
    if( theObj.options[i].selected && !theObj.options[i-1].selected )
    {
    theObj.options[i].swapNode(theObj.options[i-1]);
    }
    }
    }  
      
    function moveDown()  
    { 
    var theObj=document.all.ObjSelect;
    for(var i=theObj.length-2;i>-1;i--)
    {
    if( theObj.options[i].selected && !theObj.options[i+1].selected )
    {
    theObj.options[i].swapNode(theObj.options[i+1]);
    }
    }
    }  
      
      
    function moveLeftOrRight(fromObj,toObj)  
    {  
    var lengthOfToObj=toObj.length;
    for(var i=fromObj.length-1;i>-1;i--)
    {
    if(fromObj.options[i].selected)
    {
    toObj.add(new Option(fromObj.options[i].text,fromObj.options[i].value),lengthOfToObj);
    toObj.options[lengthOfToObj].selected=true;
    fromObj.options[i].removeNode(true);
    }
    }
    }  
      
      
     
    </script>  
      

  3.   

    JK_10000(JK)在请问一下,如果列表是1,2,3,4,5  我点个置顶按钮将变成5,1,2,3,4  也就是将最后一个移动到第一个?
      

  4.   

    JK_10000(JK)不在吗?  在线等!
      

  5.   

    <select name=ObjSelect size=6 style="font-size:11pt;width=200;height=160px" multiple  onmouseup="this.insertAdjacentElement('afterBegin',this.options[this.length-1])"> 
    <option value="11">test11</option> 
    <option value="12">test12</option> 
    <option value="13">test13</option> 
    <option value="14">test14</option> 
    <option value="15">test15</option> 
    <option value="16">test16</option> 
    </select>