这个例子是上下移左右移按钮功能

qmug

浏览: 201516 次
性别:
来自: 上海

最近访客更多访客>>

shyc

sb12345

robustwang

绕弯儿无

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

浏览器 Yahoo XHTML HTML

select.html
可以上下移左右移的按钮的功能

<!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>Select 排序，移动等</title>
<style>
.ecv_autoSizeDropDown
{
    font-family    : "Arial", "Helvetica", "sans-serif"; 
    font-size    : 12px;
    font-style    : normal;
    color        : #201B74;
    background-color: #FFFFFF;    
    width:expression((this.offsetWidth>150)?'auto':'150');
}
</style>
</head> 
<body >

<div style="font-size:10pt;">
注1：左右移动进行选取 <br/>      
注2：已解决的问题 <br/>      
----能进行多行排序<br/> 

----解决排序时滚动条归零的问题<br/> 
<br/> 
<br/>
注：本页面仅在IE6/FireFox1.5下测试过。其它浏览器或其它版本未经测试。<br/>       
原作者：JK：<a href="mailTo:jk_10000@yahoo.com.cn?subject=About%20MoveRightOrLeft">JK_10000@yahoo.com.cn</a><br/>    
<hr/>
</div>

<form name=frm>

<table>
<tr > 
    <td> 
        <select name=SrcSelect size=6 class="ecv_autoSizeDropDown" style="height:160px;" multiple ondblclick="moveLeftOrRight(document.frm.SrcSelect,document.frm.ObjSelect)"> 
            <option value="1">test1</option> 
            <option value="2">test2</option> 
            <option value="3">test3</option> 
            <option value="4">test4</option> 
            <option value="5">test5</option> 
            <option value="6">test6</option> 
            <option value="7">test7</option> 
            <option value="8">test8</option> 
            <option value="9">test9 abcde abcde abcde abcde abcde abcde abcde abcde </option> 
        </select>

    </td> 
    <td width="30px">    
        <input align="left" type=button value=">>" onclick="moveLeftOrRightAll(document.frm.SrcSelect,document.frm.ObjSelect)" ><br><br>
        <input align="left" type=button value=">" onclick="moveLeftOrRight(document.frm.SrcSelect,document.frm.ObjSelect)" ><br><br>
        <input align="left" type=button value="<" onclick="moveLeftOrRight(document.frm.ObjSelect,document.frm.SrcSelect)" ><br><br>
        <input align="left" type=button value="<<" onclick="moveLeftOrRightAll(document.frm.ObjSelect,document.frm.SrcSelect)" >
    </td>
    <td> 
        <select name=ObjSelect size=6 class="ecv_autoSizeDropDown" style="height:160px;" multiple ondblclick="moveLeftOrRight(document.frm.ObjSelect,document.frm.SrcSelect)"> 
            <option value="11">test11</option> 
            <option value="12">test12</option> 
            <option value="13">test13</option> 
            <option value="14">test14</option> 
            <option value="15">test15</option> 
            <option value="16">test16</option> 
        </select>

    </td> 
    <td width="30px">
        <input type=button value="AA" onclick="moveToTop(document.frm.ObjSelect)" > <br><br> 
        <input type=button value="A" onclick="moveUp(document.frm.ObjSelect)" > <br><br> 
        <input type=button value="V" onclick="moveDown(document.frm.ObjSelect)" ><br><br> 
        <input type=button value="VV" onclick="moveToBottom(document.frm.ObjSelect)" >

    </td>
</tr> 
</table>

</form>

<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--;
        }
    }
    resetAutoWidth(fromObj);
    resetAutoWidth(toObj);
} 

function moveLeftOrRightAll(fromObj,toObj) 
{
    var fromObjOptions=fromObj.options;
    if(fromObjOptions.length>1000) {
        //if(!confirm("Are you sure to move options?")) return false;
    }
    for(var i=0;i<fromObjOptions.length;i++){
        fromObjOptions[0].selected=true;
        toObj.appendChild(fromObjOptions[i]);
        i--;
    }
    resetAutoWidth(fromObj);
    resetAutoWidth(toObj);
} 

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;
    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;
    }
}

</script> 
</body> 
</html>

分享到：

页面传值 | 这个例子是上移下移按钮功能(改进版)

2008-09-04 14:00
浏览 1216
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

这个例子是上下移左右移按钮功能

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

这个例子是上下移 左右移按钮功能

评论

发表评论

相关推荐

JavaSript DOM总结笔记.rar

按照自己的要求打开新窗口

Javascript的document对象

6.2 实现两个select的同步

给下拉列表框数据分组

22.3 评星效果

6.13如何整合多个搜索引擎为自己所用

上下移 脚本代码 参考版

javascript 上下移 按钮 第三版本

这个例子是上移下移按钮功能(改进版)

JavaScript 提交和跳转的例子

文本框中只能输入数字的脚本例子2

JavaScript 中的DOM

通过文档事件处理程序引入JavaScript 脚本代码实例

添加号码的例子

JavaScript教程

如何调试javascript

JavaScript学习（1）

输入验证的例子

常用的脚本验证方法

最近访客更多访客>>

这个例子是上下移左右移按钮功能

上下移脚本代码参考版

javascript 上下移按钮第三版本