SELECT 选择框上下移动左右移动

最新推荐文章于 2024-05-13 13:46:43 发布

windy

最新推荐文章于 2024-05-13 13:46:43 发布

阅读量4.7k

点赞数

分类专栏： php程序小知识库文章标签： border button input 存储 list function

php程序小知识库专栏收录该内容

18 篇文章 0 订阅

订阅专栏

select.js

/***************************************************************************************************************
* 文件名：selectListTools.js
* 创建时间：2004.6.23
* 创建人：刘肖冲
* 公    司：
* 文件描述：关于list列表框的一些工具方法
*           支持IE，Netscape，Firefox浏览器
* 主要方法：
*   1， moveUp(oSelect,isToTop) －－－－－－－－－－－－向上移动一个list列表框的选中项目，
*                                                        可以支持多选移动，可以设置是否移动到顶层
*   2， moveDown(oSelect,isToBottom)－－－－－－－－－－向下移动一个list列表框的选中项目，
*                                                        可以支持多选移动，可以设置是否移动到底层
*   3， moveSelected(oSourceSel,oTargetSel) －－－－－－在两个列表框之间转移数据
*   4， moveAll(oSourceSel,oTargetSel)－－－－－－－－－转移两个列表框之间的全部数据
*   5， deleteSelectItem(oSelect) －－－－－－－－－－－删除选中数据
*
* 修改履历
*          Ver         日期          修改人          修改内容
*          1.0    2004.06.23      刘肖冲          Only IE
*          1.1    2006.01.18      刘肖冲      增加对FF，NS的支持
*
****************************************************************************************************************/

/**
* added by 刘肖冲 2006.1.17
* FF，NS不支持swapNode，自己实现
*/
if(window.Node)
{
    Node.prototype.swapNode=function(node)
    {
        var nextSibling=this.nextSibling;
        var parentNode=this.parentNode;
        node.parentNode.replaceChild(this,node);
        parentNode.insertBefore(node,nextSibling);
    }
}

/**
* added by 刘肖冲 2004.6.23
* 使选中的项目上移
*
* oSelect: 源列表框
* isToTop: 是否移至选择项到顶端，其它依次下移，
*          true为移动到顶端，false反之，默认为false
*/
function moveUp(oSelect,isToTop)
{
    //默认状态不是移动到顶端
    if(isToTop == null)
    var isToTop = false;

    //如果是多选------------------------------------------------------------------
    if(oSelect.multiple)
    {
        for(var selIndex=0; selIndex<oSelect.options.length; selIndex++)
        {
            //如果设置了移动到顶端标志
            if(isToTop)
            {
                if(oSelect.options[selIndex].selected)
                {
                    var transferIndex = selIndex;
                    while(transferIndex > 0 && !oSelect.options[transferIndex - 1].selected)
                    {
                        oSelect.options[transferIndex].swapNode(oSelect.options[transferIndex - 1]);
                        transferIndex --;
                    }
                }
            }
            //没有设置移动到顶端标志
           else
           {
                if(oSelect.options[selIndex].selected)
                {
                    if(selIndex > 0)
                    {
                       if(!oSelect.options[selIndex - 1].selected)
                       oSelect.options[selIndex].swapNode(oSelect.options[selIndex - 1]);
                    }
                }
            }
        }
     }
     //如果是单选--------------------------------------------------------------------
    else
    {
        var selIndex = oSelect.selectedIndex;
        if(selIndex <= 0)
            return;
        //如果设置了移动到顶端标志
        if(isToTop)
        {
            while(selIndex > 0)
            {
                oSelect.options[selIndex].swapNode(oSelect.options[selIndex - 1]);
                selIndex --;
            }
        }
        //没有设置移动到顶端标志
       else
           oSelect.options[selIndex].swapNode(oSelect.options[selIndex - 1]);
    }
}

/**
* added by 刘肖冲 2004.6.23
* 使选中的项目下移
*
* oSelect: 源列表框
* isToTop: 是否移至选择项到底端，其它依次上移，
*          true为移动到底端，false反之，默认为false
*/
function moveDown(oSelect,isToBottom)
{
    //默认状态不是移动到顶端
    if(isToBottom == null)
        var isToBottom = false;

    var selLength = oSelect.options.length - 1;

    //如果是多选------------------------------------------------------------------
    if(oSelect.multiple)
    {
        for(var selIndex=oSelect.options.length - 1; selIndex>= 0; selIndex--)
        {
            //如果设置了移动到顶端标志
            if(isToBottom)
            {
                if(oSelect.options[selIndex].selected)
                {
                    var transferIndex = selIndex;
                    while(transferIndex < selLength && !oSelect.options[transferIndex + 1].selected)
                    {
                        oSelect.options[transferIndex + 1].swapNode(oSelect.options[transferIndex]);
                        transferIndex ++;
                    }
                }
            }
            //没有设置移动到顶端标志
            else
            {
                if(oSelect.options[selIndex].selected)
                {
                    if(selIndex < selLength)
                    {
                        if(!oSelect.options[selIndex + 1].selected)
                            oSelect.options[selIndex + 1].swapNode(oSelect.options[selIndex]);
                    }
                }
            }
        }
     }
    //如果是单选--------------------------------------------------------------------
    else
    {
        var selIndex = oSelect.selectedIndex;
        if(selIndex >= selLength - 1)
            return;
        //如果设置了移动到顶端标志
        if(isToBottom)
        {
            while(selIndex < selLength - 1)
            {
                oSelect.options[selIndex].swapNode(oSelect.options[selIndex + 1]);
                selIndex ++;
            }
        }
        //没有设置移动到顶端标志
        else
            oSelect.options[selIndex].swapNode(oSelect.options[selIndex + 1]);
    }
}

/**
* added by 刘肖冲 2004.6.23
* 移动select的部分内容,必须存在value，此函数以value为标准进行移动
*
* oSourceSel: 源列表框对象
* oTargetSel: 目的列表框对象
*/
function moveSelected(oSourceSel,oTargetSel)
{
    //建立存储value和text的缓存数组
    var arrSelValue = new Array();
    var arrSelText = new Array();
    //此数组存贮选中的options，以value来对应
    var arrValueTextRelation = new Array();
    var index = 0;//用来辅助建立缓存数组

    //存储源列表框中所有的数据到缓存中，并建立value和选中option的对应关系
    for(var i=0; i<oSourceSel.options.length; i++)
    {
        if(oSourceSel.options[i].selected)
        {
            //存储
            arrSelValue[index] = oSourceSel.options[i].value;
            arrSelText[index] = oSourceSel.options[i].text;

            //建立value和选中option的对应关系
            arrValueTextRelation[arrSelValue[index]] = oSourceSel.options[i];
            index ++;
        }
    }

    //增加缓存的数据到目的列表框中，并删除源列表框中的对应项
    for(var i=0; i<arrSelText.length; i++)
    {
        //增加
        var oOption = document.createElement("option");
        var oTxt = document.createTextNode(arrSelText[i]);
        oOption.appendChild(oTxt);
        oOption.value = arrSelValue[i];
        oTargetSel.appendChild(oOption);
        //删除源列表框中的对应项
        oSourceSel.removeChild(arrValueTextRelation[arrSelValue[i]]);
    }
}

/**
* added by 刘肖冲 2004.6.23
* 移动select的整块内容
*
* oSourceSel: 源列表框对象
* oTargetSel: 目的列表框对象
*/
function moveAll(oSourceSel,oTargetSel)
{
    //建立存储value和text的缓存数组
    var arrSelValue = new Array();
    var arrSelText = new Array();

    //存储所有源列表框数据到缓存数组
    for(var i=0; i<oSourceSel.options.length; i++)
    {
        arrSelValue[i] = oSourceSel.options[i].value;
        arrSelText[i] = oSourceSel.options[i].text;
    }

    //将缓存数组的数据增加到目的select中
    for(var i=0; i<arrSelText.length; i++)
    {
        var oOption = document.createElement("option");
        var oTxt = document.createTextNode(arrSelText[i]);
        oOption.appendChild(oTxt);
        oOption.value = arrSelValue[i];
        oTargetSel.appendChild(oOption);
    }

    //清空源列表框数据，完成移动
    oSourceSel.innerHTML = "";
}

/**
* added by 刘肖冲 2004.6.23
* 删除选定项目
*
* oSelect: 源列表框对象
*/
function deleteSelectItem(oSelect)
{
    for(var i=0; i<oSelect.options.length; i++)
    {
        if(i>=0 && i<=oSelect.options.length-1 && oSelect.options[i].selected)
        {
            oSelect.options[i] = null;
            i --;
        }
    }
}

//-->

//js文件完毕

windy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
SELECT 选择框上下移动左右移动

1，功能说明：实现两个list之间的数据转换，单个select的上下移动，删除。（支持多选操作） 2，函数简介上移：moveUp(oSelect,isToTop) 下移：moveDown(oSelect,
复制链接

扫一扫