|
|
1.portSelect.html(自己写的)
<html><head><title></title><script> var fnCheck=function(obj){ var oSelect=document.getElementById("ports"); if(obj.checked) { oSelect.options[oSelect.options.length]=new Option(obj.value,obj.value); }else{ removeOption(obj.value); } } var removeOption=function(value){ var oSelect=document.getElementById("ports"); for(var i=0;i<oSelect.options.length;i++) { if(value==oSelect.options[i].value) { oSelect.remove(i); break; } } } //上移 function up() { var oSelect=document.getElementById("ports");for(var i=0;i<oSelect.options.length;i++){ if(oSelect.options[i].selected) { if(i<=0) return; if(!oSelect.options[i-1].selected) { // oSelect.options[i].swapNode(oSelect.options[i-1]); //ff浏览器不支持 var tempValue=oSelect.options[i].value; var tempText=oSelect.options[i].text; oSelect.options[i].value=oSelect.options[i-1].value; oSelect.options[i].text=oSelect.options[i-1].text; oSelect.options[i].selected=false; oSelect.options[i-1].value=tempValue;oSelect.options[i-1].text=tempText;oSelect.options[i-1].selected=true; } }} } //下移 function down() { var oSelect=document.getElementById("ports");for(var i=oSelect.options.length-1;i>=0;i--){ if(oSelect.options[i].selected) { if(i>=oSelect.options.length-1) return; if(!oSelect.options[i+1].selected) { // oSelect.options[i].swapNode(oSelect.options[i+1]); //ff浏览器不支持 var tempValue=oSelect.options[i].value; var tempText=oSelect.options[i].text; oSelect.options[i].value=oSelect.options[i+1].value; oSelect.options[i].text=oSelect.options[i+1].text; oSelect.options[i].selected=false; oSelect.options[i+1].value=tempValue; oSelect.options[i+1].text=tempText; oSelect.options[i+1].selected=true; } }} } //移出 function remove() { var oSelect=document.getElementById("ports"); for(var i=0;i<oSelect.options.length;i++) { if(oSelect.options[i].selected) { oSelect.remove(i); i--; } } } </script></head><body> 已选端口: <br> <select style="width:200px" size="10" id="ports" multiple="multiple"></select> <input type="button" value="上移" > <input type="button" value="下移" > <input type="button" value="移出" > <p> 待选端口：<br> <input type="checkbox" name="portData" value="100" >100 <input type="checkbox" name="portData" value="200" >200 <input type="checkbox" name="portData" value="300" >300 <input type="checkbox" name="portData" value="400" >400 <input type="checkbox" name="portData" value="500" >500 <input type="checkbox" name="portData" value="600" >600 <br> <input type="checkbox" name="portData" value="700" >700 <input type="checkbox" name="portData" value="800" >800 <input type="checkbox" name="portData" value="900" >900 <input type="checkbox" name="portData" value="901" >901 <input type="checkbox" name="portData" value="902" >902 <input type="checkbox" name="portData" value="903" >903</body></html>
2.selectDemo.html(别人写的，经典)
<HTML> <HEAD> <TITLE> Select Demo </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </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> </tr> <tr> <td width="40%"> <select multiple name="left" id="left" size="8" style='width:200;' ondblclick="moveOption(document.getElementById('left'), document.getElementById('right'))"> <option value="20">测试数据一</option> <option value="30">测试数据二</option> <option value="40">测试数据三</option> <option value="50">测试数据四</option> <option value="60">测试数据五</option> <option value="70">测试数据六</option> <option value="80">测试数据七</option> <option value="90">测试数据八</option> </select> </td> <td width="20%" align="center"> <input type="button" value=" >> " ><br><br> <input type="button" value=" << " > </td> <td width="40%"> <select multiple name="right" id="right" size="8" style='width:200;' ondblclick="moveOption(document.getElementById('right'), document.getElementById('left'))"> </select> </td> </tr> <tr> <td colspan="3"> <CENTER> <INPUT TYPE="button" value="置顶" > <INPUT TYPE="button" value="上移" > <INPUT TYPE="button" value="下移" > <INPUT TYPE="button" value="置底" > </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.options[i].text = obj.options[i-1].text; obj.options[i].value = obj.options[i-1].value; obj.options[i].selected = false; obj.options[i-1].text = selText; obj.options[i-1].value = selValue; obj.options[i-1].selected=true; } } } } //下移 function moveDown(obj) { for(var i = obj.length -2 ; i >= 0; i--) {//向下移动，最后一个不需要处理，所以直接从倒数第二个开始 if(obj.options[i].selected) { if(!obj.options[i+1].selected) { var selText = obj.options[i].text; var selValue = obj.options[i].value; obj.options[i].text = obj.options[i+1].text; obj.options[i].value = obj.options[i+1].value; obj.options[i].selected = false; obj.options[i+1].text = selText; obj.options[i+1].value = selValue; obj.options[i+1].selected=true; } } } } //移动 function moveOption(obj1, obj2) { for(var i = obj1.options.length - 1 ; i >= 0 ; i--) { if(obj1.options[i].selected) { var opt = new Option(obj1.options[i].text,obj1.options[i].value); opt.selected = true; obj2.options.add(opt); obj1.remove(i); } } } //置顶 function moveTop(obj) { var opts = []; for(var i =obj.options.length -1 ; i >= 0; i--) { if(obj.options[i].selected) { opts.push(obj.options[i]); obj.remove(i); } } var index = 0 ; for(var t = opts.length-1 ; t>=0 ; t--) { var opt = new Option(opts[t].text,opts[t].value); opt.selected = true; obj.options.add(opt, index++); } } //置底 function moveBottom(obj) { var opts = []; for(var i =obj.options.length -1 ; i >= 0; i--) { if(obj.options[i].selected) { opts.push(obj.options[i]); obj.remove(i); } } for(var t = opts.length-1 ; t>=0 ; t--) { var opt = new Option(opts[t].text,opts[t].value); opt.selected = true; obj.options.add(opt); } } //--> </SCRIPT> |
|
京ICP备14020293号-2
本网站内容均收集于互联网，如有问题请联系QQ:389897944予以删除
窥视卡
雷达卡
楼主
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡