js实现左右2个下拉选择框，左右上下移动功能

hylong05

浏览: 24384 次
性别:
来自: 合肥

最近访客更多访客>>

稚垚小朋友

mailyxf

wangguian

u_lama

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

J#HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>

<form name=frm1>
<table width="100%" border="0" align="center" cellpadding="1" cellspacing="1" class="docBoxNoPanel">
<tr >
    <td nowrap="nowrap"> </td>
<td width="50%" align="center">
<select name="SrcSelect" size=6 style="height:160px;width:98%" multiple ondblclick="moveLeftOrRight(document.frm1.SrcSelect,document.frm1.ObjSelect)">
            <option value="001">第一项</option>
<option value="002">第二项</option>
<option value="003">第三项</option>
<option value="004">第四项</option>
<option value="005">第五项</option>
<option value="006">第六项</option>
<option value="007">第七项</option>
<option value="008">第八项</option>
<option value="009">第九项</option>
<option value="010">第十项</option>
        </select>

    </td>
    <td width="30px" align="center">
        <input align="left" type=button value=">>" title="全部右移" onclick="moveLeftOrRightAll(document.frm1.SrcSelect,document.frm1.ObjSelect)" ><br>
        <input align="left" type=button value=">" title="右移" onclick="moveLeftOrRight(document.frm1.SrcSelect,document.frm1.ObjSelect)" ><br>
        <input type=button value="↑" title="上移" onclick="moveUp(document.frm1.ObjSelect)" ><br>
        <input type=button value="↓" title="下移" onclick="moveDown(document.frm1.ObjSelect)" ><br>
        <input align="left" type=button value="<" title="左移" onclick="moveLeftOrRight(document.frm1.ObjSelect,document.frm1.SrcSelect)" ><br>
        <input align="left" type=button value="<<" title="全部左移" onclick="moveLeftOrRightAll(document.frm1.ObjSelect,document.frm1.SrcSelect)" >
    </td>
    <td width="50%" align="center">
        <select name="ObjSelect" size=6 style="height:160px;width:98%" multiple ondblclick="moveLeftOrRight(document.frm1.ObjSelect,document.frm1.SrcSelect)">
        </select>
    </td>
</tr>
<tr>
<td colspan="4"><button name="selectCheck" onclick="checkSelectedOption();">选中查看</button></td>
</tr>
</table>
</form>
</BODY>
</HTML>

<script language="javascript">
//选中项向左移动或向右移动
function moveLeftOrRight(fromObj,toObj){
    var fromObjOptions=fromObj.options;
    for(var i=0;i<fromObjOptions.length;i++){
        if(fromObjOptions[i].selected){
            toObj.appendChild(fromObjOptions[i]);
            i--;
        }
    }
}
//左边全部右移动，或右边全部左移
function moveLeftOrRightAll(fromObj,toObj){
    var fromObjOptions=fromObj.options;
    for(var i=0;i<fromObjOptions.length;i++){
        fromObjOptions[0].selected=true;
        toObj.appendChild(fromObjOptions[i]);
        i--;
    }
}
//向上移动
function moveUp(selectObj){
    var theObjOptions=selectObj.options;
    for(var i=1;i<theObjOptions.length;i++) {
        if( theObjOptions[i].selected && !theObjOptions[i-1].selected ) {
            swapOptionProperties(theObjOptions[i],theObjOptions[i-1]);
        }
    }
}
//向下移动
function moveDown(selectObj){
    var theObjOptions=selectObj.options;
    for(var i=theObjOptions.length-2;i>-1;i--) {
        if( theObjOptions[i].selected && !theObjOptions[i+1].selected ) {
            swapOptionProperties(theObjOptions[i],theObjOptions[i+1]);
        }
    }
}
//移动至最顶端
function moveToTop(selectObj){
    var theObjOptions=selectObj.options;
    var oOption=null;
    for(var i=0;i<theObjOptions.length;i++) {
        if( theObjOptions[i].selected && oOption) {
            selectObj.insertBefore(theObjOptions[i],oOption);
        }
        else if(!oOption && !theObjOptions[i].selected) {
            oOption=theObjOptions[i];
        }
    }
}
//移动至最低端
function moveToBottom(selectObj){
    var theObjOptions=selectObj.options;
    var oOption=null;
    for(var i=theObjOptions.length-1;i>-1;i--) {
        if( theObjOptions[i].selected ) {
            if(oOption) {
                oOption=selectObj.insertBefore(theObjOptions[i],oOption);
            }
            else oOption=selectObj.appendChild(theObjOptions[i]);
        }
    }
}
//全部选中
function selectAllOption(selectObj){
    var theObjOptions=selectObj.options;
    for(var i=0;i<theObjOptions.length;i++){
        theObjOptions[0].selected=true;
    }
}

/* private function */
function swapOptionProperties(option1,option2){
    //option1.swapNode(option2);
    var tempStr=option1.value;
    option1.value=option2.value;
    option2.value=tempStr;

var tempValSource=option1.valSource;//
option1.valSource=option2.valSource;//
option2.valSource=tempValSource;//

    tempStr=option1.text;
    option1.text=option2.text;
    option2.text=tempStr;
    tempStr=option1.selected;
    option1.selected=option2.selected;
    option2.selected=tempStr;
}

function resetAutoWidth(obj){
    var tempWidth=obj.style.getExpression("width");
    if(tempWidth!=null) {
        obj.style.width="auto";
        obj.style.setExpression("width",tempWidth);
        obj.style.width=null;
    }
}

function checkSelectedOption(){
var ObjSelect = document.frm1.ObjSelect;
var itemField="";
var itemName="";
if(ObjSelect&&ObjSelect.options&&ObjSelect.options.length>0){
var len = ObjSelect.options.length;
for(var j=0; j<len; j++){
itemField += ObjSelect.options[j].value + "|";
itemName += ObjSelect.options[j].text + "|";
}
}
alert(itemField);
alert(itemName);
return;
}

</script>