select多选列表上移,下移,移出示例
编程技术 / houtizong 发布于 3年前 77
- 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="上移" onClick="up()"> <input type="button" value="下移" onClick="down()"> <input type="button" value="移出" onClick="remove()"> <p> 待选端口：<br> <input type="checkbox" name="portData" value="100" onClick="fnCheck(this)">100 <input type="checkbox" name="portData" value="200" onClick="fnCheck(this)">200 <input type="checkbox" name="portData" value="300" onClick="fnCheck(this)">300 <input type="checkbox" name="portData" value="400" onClick="fnCheck(this)">400 <input type="checkbox" name="portData" value="500" onClick="fnCheck(this)">500 <input type="checkbox" name="portData" value="600" onClick="fnCheck(this)">600 <br> <input type="checkbox" name="portData" value="700" onClick="fnCheck(this)">700 <input type="checkbox" name="portData" value="800" onClick="fnCheck(this)">800 <input type="checkbox" name="portData" value="900" onClick="fnCheck(this)">900 <input type="checkbox" name="portData" value="901" onClick="fnCheck(this)">901 <input type="checkbox" name="portData" value="902" onClick="fnCheck(this)">902 <input type="checkbox" name="portData" value="903" onClick="fnCheck(this)">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=" >> " 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="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="置顶" 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> </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> 请勿发布不友善或者负能量的内容。与人为善，比聪明更重要！
技术博客集 - 网站简介：
前后端技术：
后端基于Hyperf2.1框架开发,前端使用Bootstrap可视化布局系统生成
网站主要作用：
1.编程技术分享及讨论交流，内置聊天系统;
2.测试交流框架问题，比如：Hyperf、Laravel、TP、beego;
3.本站数据是基于大数据采集等爬虫技术为基础助力分享知识，如有侵权请发邮件到站长邮箱，站长会尽快处理;
4.站长邮箱：[email protected];
文章归档
文章标签
友情链接
