通过select实现了内容互相移动的效果。如图所示效果。
有关代码:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
<script type="text/javascript">
function addItem(objFrom,objTo){
// objFrom 总的下拉框的所有的对象;
var flag = false;
var leng = objFrom.options.length;
var ar=new Array();
for(var i = 0; i < objFrom.options.length;i++){
if(objFrom.options[i].selected == true){
//alert(i);
//alert(objFrom.selectedIndex);
//选择的项的索引值放到Array()数组中
ar[i]= i;
//flag = true;
// 一个新的new Option(text,value);
var selectItem = new Option(objFrom.options[i].text,objFrom.options[i].value);
objTo.options.add(selectItem);
//objFrom.options.remove(objFrom.selectedIndex);
//objFrom.options[i]=null;
//objFrom.options.remove(i);
}
}
// document.write(ar + "<br />");
// document.write(ar + "");
//alert(ar);
if (ar.length==0) {
alert("please select a Item");
return;
} else {
var i=0;
for (var j=0; j<ar.length; j++){
// alert(ar[j]);
if (ar[j]==undefined) {
continue;
} else {
// 删除选中的项每删一个索引值要变的向上逐渐减一
objFrom.options.remove(ar[j]-i);
i++;
}
}
}
/**
<!--
var x=0;
for (var n=0;n<ar.length;n++) {
if (ar[n]==undefined){
x++;
break;
} else {
x++;
}
}
if (x>0) {
var btn1=document.getElementById("btn1");
btn1.disabled=false;
var btn2=document.getElementById("btn2");
btn2.disabled=false;
var btn3=document.getElementById("btn3");
btn3.disabled=false;
var btn4=document.getElementById("btn4");
btn4.disabled=false;
}
if (x==leng) {
if(objFrom.options.length==0 ||objFrom==null) {
alert("ok");
checkFlag();
sortItem(objTo);
return;
}
var btn1=document.getElementById("btn1");
btn1.disabled=false;
var btn2=document.getElementById("btn2");
btn2.disabled=false;
var btn3=document.getElementById("btn3");
btn3.disabled=false;
var btn4=document.getElementById("btn4");
btn4.disabled=false;
}
-->
*/
// if(!flag){
// alert("please select a Item");
//}
sortItem(objTo);
}
function allAddItem(objFrom,objTo){
for(var i = objFrom.options.length - 1;i>=0;i--){
var objItem = new Option(objFrom.options[i].text,objFrom.options[i].value);
objTo.options.add(objItem);
objFrom.options.remove(i);
}
sortItem(objTo);
}
function sortItem(objTo){
var ln = objTo.options.length;
var arrText = new Array();
var arrValue = new Array();
for(var i=0;i<ln;i++){
arrText[i] = objTo.options[i].text;
//alert(arrText[i]);
}
arrText.sort();
//alert(arrText);
for(var i=0;i<ln;i++){
for(var j = 0;j<objTo.options.length;j++){
if(arrText[i] == objTo.options[j].text){
arrValue[i] = objTo.options[j].value;
break;
}
}
}
while(ln--){
objTo.options[ln] = null;
}
for(i = 0;i<arrText.length;i++){
objTo.add(new Option(arrText[i],arrValue[i]));
}
}
function swapItem(option1,option2){
var tempStr = option1.value;
//alert(tempStr);
//alert(option2.value);
option1.value = option2.value;
option2.value = tempStr;
tempStr = option1.text;
option1.text = option2.text;
option2.text = tempStr;
tempStr = option1.selected;
option1.selected = option2.selected;
option2.selected = tempStr;
}
function moveUp(selectObj){
var obj = selectObj.options;
for(var i = 1;i<obj.length;i++){
if(obj[i].selected && !obj[i-1].selected){
alert(obj[i].text);
alert(obj[i-1].text);
swapItem(obj[i],obj[i-1]);
}
}
}
function moveDown(selectObj){
var obj = selectObj.options;
for(var i = obj.length -2;i>-1;i--){
if(obj[i].selected && !obj[i+1].selected){
swapItem(obj[i],obj[i+1]);
}
}
}
function moveToTop(selectObj){
var obj = selectObj.options;
var oOption = null;
for(var i = 0;i<obj.length;i++){
if(obj[i].selected && oOption){
alert(oOption.value);
selectObj.insertBefore(obj[i],oOption);
}else if(!oOption && !obj[i].selected){
oOption = obj[i];
}
}
}
function moveToBottom(selectObj){
var obj = selectObj.options;
alert(obj.length);
var oOption = null;
for(var i = obj.length-1;i> -1;i--){
if(obj[i].selected){
if(oOption){
oOption = selectObj.insertBefore(obj[i],oOption);
}else{
oOption = selectObj.appendChild(obj[i]);
}
}
}
}
/*********************************************************
*初期画面項目を設定する。οnlοad="checkFlag()"
*********************************************************/
function checkFlag(){
var flag = false;
var btn1=document.getElementById("btn1");
btn1.disabled=flag;
var btn2=document.getElementById("btn2");
btn2.disabled=flag;
var btn3=document.getElementById("btn3");
btn3.disabled=true;
var btn4=document.getElementById("btn4");
btn4.disabled=true;
}
</script>
</head>
<body>
<table>
<tr>
<td>Color Code </td>
<td></td>
<td>Sample Order </td>
<td></td>
</tr>
<tr>
<td>
<select id="selectColor" multiple="multiple" style="width:200px;height:200px;">
<option value="WBlack0">Black0</option>
<option value="Blue1">Blue1</option>
<option value="DK-RS2">DARK RINSE2</option>
<option value="AK-SW3">AARK STONEWASH3</option>
<option value="Green4">Green4</option>
<option value="MD-SL5">MED SANDBLAST5</option>
<option value="CD-SW6">CED STONEWASH6</option>
<option value="NA7">Not applicable7</option>
<option value="Yellow8">Yellow8</option>
<option value="Red9">Red9</option>
</select>
</td>
<td>
<table>
<tr>
<td><input type="button" id="btn1" value="-> " οnclick="addItem(selectColor,selectSo)"/></td>
</tr>
<tr>
<td><input type="button" id="btn2" value="->>" οnclick="allAddItem(selectColor,selectSo)"/></td>
</tr>
<tr>
<td><input type="button" id="btn3" value="<<-" οnclick="allAddItem(selectSo,selectColor)"/></td>
</tr>
<tr>
<td><input type="button" id="btn4" value="<- " οnclick="addItem(selectSo,selectColor)"/></td>
</tr>
</table>
</td>
<td>
<select id="selectSo" multiple="multiple" style="width:200px;height:200px;">
</select>
</td>
<td>
<table>
<tr>
<td><input type="button" id="btn5" value="AA" οnclick="moveToTop(selectSo)"/></td>
</tr>
<tr>
<td><input type="button" id="btn6" value="A" οnclick="moveUp(selectSo)"/></td>
</tr>
<tr>
<td><input type="button" id="btn7" value="V" οnclick="moveDown(selectSo)"/></td>
</tr>
<tr>
<td><input type="button" id="btn8" value="VV" οnclick="moveToBottom(selectSo)"/></td>
</tr>
</table>
</td>
</tr>
</table>
<script type="text/javascript">
document.getElementById("selectColor").ondblclick = function(){
addItem(selectColor,selectSo);
};
document.getElementById("selectSo").ondblclick = function(){
addItem(selectSo,selectColor);
};
</script>
</body>
</html>