日期:2014-05-16 浏览次数:20464 次
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> Select列表框交换数据</TITLE> </HEAD> <style> center { font-size:12px; color:red; font-weight:bold; } select { font-size:12px; color:green; } </style> <BODY> <span id='feedback'></span> <form method="post" name="myform"> <table border="0" width="400"> <tr> <td><CENTER>可选择排序方式</CENTER></td> <td> </td> <td><CENTER>已选择排序方式</CENTER></td> <td></td> <td><CENTER> </CENTER></td> </tr> <tr> <td width="27%"> <select multiple name="left" id="left" size="8" style='width:200;' ondblclick="moveOption(document.getElementById('left'), document.getElementById('right'))"> <option value="20">ASP</option> <option value="30">PHP</option> <option value="40">ASP.NET</option> <option value="50">JSP</option> <option value="60">VB</option> <option value="70">DELPHI</option> <option value="80">AJAX</option> <option value="90">JQUERY</option> </select> </td> <td width="7%" align="center"> <input type="button" value=" >> " onclick="moveOption(document.getElementById('left'),document.getElementById('right'))"><br><br> <input type="button" value=" << " onclick="moveOption(document.getElementById('right'), document.getElementById('left'))"> </td> <td width="27%"> <select multiple name="right" id="right" size="8" style='width:200;' ondblclick="moveOption(document.getElementById('right'), document.getElementById('left'))"> <option value="33">ertevv</option> <option value="11">aerwrew</option> <option value="22">JQUddddERY</option> </select> </td> </td> <td width="7%" align="center"> <input type="button" value=" >> " onclick="moveOption(document.getElementById('right'),document.getElementById('right2'))"><br><br> <input type="button" value=" << " onclick="moveOption(document.getElementById('right2'), document.getElementById('right'))"> </td> <td width="27%"> <select multiple name="right2" id="right2" size="8" style='width:200;' ondblclick="moveOption(document.getElementById('right2'), document.getElementById('right'))"> </select> </td> </tr> <tr> <td colspan="3"> <CENTER> <INPUT TYPE="button" value="置顶" onclick="moveTop(document.getElementById('right'));"> <INPUT TYPE="button" value="上移" onclick="moveUp(document.getElementById('right'));"> <INPUT TYPE="button" value="下移" onclick="moveDown(document.getElementById('right'));"> <INPUT TYPE="button" value="置底" onclick="moveBottom(document.getElementById('right'));"> </CENTER></td> <td colspan="3"> <CENTER> <INPUT TYPE="button" value="置顶" onclick="moveTop(document.getElementById('right2'));"> <INPUT TYPE="button" value="上移" onclick="moveUp(document.getElementById('right2'));"> <INPUT TYPE="button" value="下移" onclick="moveDown(document.getElementById('right2'));"> <INPUT TYPE="button" value="置底" onclick="moveBottom(document.getElementById('right2'));"> </CENTER></td> </tr> </table> </BODY> </HTML> <SCRIPT LANGUAGE="JavaScript"> <!-- //上移 function moveUp(obj) { for(var i=1; i < obj.length; i++) {//最上面的一个不需要移动,所以直接从i=1开始 if(obj.options[i].selected) { if(!obj.options.item(i-1).selected) { var selText = obj.options[i].text; var selValue = obj.options[i].value; obj.opti