Select multiple多選上移、下移
阿新 • • 發佈：2018-11-16
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <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="dropOption(document.getElementById('right'))"> </td> <td width="40%"> <select multiple name="right" id="right" size="8" style='width:200;' ondblclick="dropOption(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> </tr> </table> </BODY> </HTML> <SCRIPT LANGUAGE="JavaScript"> <!-- //上移 function moveUp(obj){ for(var i=1; i < obj.options.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.options.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 (obj2.options.length > 0){ var exsits = false; for (var j = 0; j < obj2.options.length; j ++ ){ if (obj2.options[j].value == obj1.options[i].value){ exsits = true; break; } } if(exsits){ continue; } } 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 dropOption(obj){ for(var i = obj.options.length - 1 ; i >= 0 ; i--){ if(obj.options[i].selected){ obj.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>