有关select左右移动、上下移动、双击移动效果代码

最新推荐文章于 2024-07-26 20:46:33 发布

dfl_tx1999

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量218

点赞数

分类专栏： Web前端文章标签： xhtml javascript ViewUI

本文链接：https://blog.csdn.net/dfl_tx1999/article/details/84434718

版权

Web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏


<!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){ 
	var flag = false;  
        for(var i = 0; i < objFrom.options.length;i++){   
            if(objFrom.options[i].selected == true){
		flag = true;   
                var selectItem = new Option(objFrom.options[i].text,objFrom.options[i].value);   
                objTo.options.add(selectItem);   
                objFrom.options.remove(i);   
            }   
        }
	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;   
        }   
        arrText.sort();   
        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;
		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){
				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){
				selectObj.insertBefore(obj[i],oOption);
			}else if(!oOption && !obj[i].selected){
				oOption = obj[i];
			}
		}
	}
	function moveToBottom(selectObj){
		var obj = selectObj.options;
		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]);
				}
			}
		}
	}
// --></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="Black">Black</option>   
                <option value="Blue">Blue</option>   
                <option value="DK-RS">DARK RINSE</option>   
                <option value="DK-SW">DARK STONEWASH</option>   
                <option value="Green">Green</option>   
                <option value="MD-SL">MED SANDBLAST</option>   
                <option value="MD-SW">MED STONEWASH</option>   
                <option value="NA">Not applicable</option>   
                <option value="Yellow">Yellow</option>   
                <option value="Red">Red</option>   
            </select>   

        </td>   
        <td>   
            <table>   
                <tr>   
                    <td><input type="button" id="btn1" value="-> " onclick="addItem(selectColor,selectSo)"/></td>   
                </tr>   
                <tr>   
                    <td><input type="button" id="btn2" value="->>" onclick="allAddItem(selectColor,selectSo)"/></td>   
                </tr>   
                <tr>   
                    <td><input type="button" id="btn3" value="<<-" onclick="allAddItem(selectSo,selectColor)"/></td>   
                </tr>   
                <tr>   
                    <td><input type="button" id="btn4" value="<- " onclick="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" onclick="moveToTop(selectSo)"/></td>
				</tr>
				<tr>
					<td><input type="button" id="btn6" value="A" onclick="moveUp(selectSo)"/></td>
				</tr>
				<tr>
					<td><input type="button" id="btn7" value="V" onclick="moveDown(selectSo)"/></td>
				</tr>
				<tr>
				</tr>
					<td><input type="button" id="btn8" value="VV" onclick="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>