js源码--select的应用

转载 2007年09月15日 22:48:00
转自:

LxcJie的专栏


在bs系统中,经常使用到select之间的转移,这里提供了一些通用方法,希望对大家有所帮助 : )

        2006.01.18对代码进行升级,使其支持IE,Netscape,Firefox

把下面的内容拷贝到一个htm文件中即可以看到效果.

<!-- 欢迎转载,请保留作者及其出处,谢谢 -->

<SCRIPT language="javascript">
<!--
/***************************************************************************************************************
 * 文 件 名: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文件完毕
</SCRIPT>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link type="text/css" rel="stylesheet" href="/js/css/common.css">
<BODY style="font-size:12px">
<FORM name="form1" method="post" action="">

    <span>
       <br>
       1,功能说明:实现两个list之间的数据转换,单个select的上下移动,删除。(支持多选操作)<br><br>
       2,函数简介
               <ul>
                    <li>上移:moveUp(oSelect,isToTop)</li>
                    <li>下移:moveDown(oSelect,isToTop)</li>
                    <li>选中转移:moveSelected(oSourceSel,oTargetSel)</li>
                    <li>全部转移:moveAll(oSourceSel,oTargetSel)</li>
                    <li>删除选中:deleteSelectItem(oSelect)</li>
               </ul>
       <hr><br>
   </span>
  <SELECT id="left" name="left" size="10" id="select" multiple style="width:100px; ">
   <OPTION value="aaaaa">aaaaa</OPTION>
   <OPTION value="bbbbb">bbbbb</OPTION>
   <OPTION value="ccccc">ccccc</OPTION>
  </SELECT>
  <INPUT style="border:1px solid black " type="button" value=">>>" onClick="moveSelected(document.getElementById('left'),document.getElementById('right'))">
  <INPUT style="border:1px solid black " type="button" value="<<<" onClick="moveSelected(document.getElementById('right'),document.getElementById('left'))">
  <SELECT id="right" name="right" size="10" id="select" multiple style="width:100px; ">
   <OPTION value="ddddd">ddddd</OPTION>
   <OPTION value="eeeee">eeeee</OPTION>
   <OPTION value="fffff">fffff</OPTION>
   <OPTION value="ggggg">ggggg</OPTION>
   <OPTION value="hhhhh">hhhhh</OPTION>
   <OPTION value="iiiii">iiiii</OPTION>
  </SELECT>
  <br><br><br><br>
  <DIV style="background-color:#CCCCCC;padding:2px">
  <INPUT style="border:1px solid black " type="button" value="上移一行" onClick="moveUp(document.getElementById('right'));moveUp(document.getElementById('left'))">
  <INPUT style="border:1px solid black " type="button" value="下移一行" onClick="moveDown(document.getElementById('right'));moveDown(document.getElementById('left'))">
  <INPUT style="border:1px solid black " type="button" value="上移到顶" onClick="moveUp(document.getElementById('right'),true);moveUp(document.getElementById('left'),true)">
  <INPUT style="border:1px solid black " type="button" value="下移到底" onClick="moveDown(document.getElementById('right'),true);moveDown(document.getElementById('left'),true);">  (支持多选移动)
  </DIV>
  <BR><BR>
  <DIV style="background-color:#CCCCCC; padding:5px; width:100%; position:relative">
  右移:<INPUT type="radio" name="ifAll" value="right" checked> <br>
  左移:<INPUT type="radio" name="ifAll" value="left"><br><br>
  <INPUT type="button" value="移动全部" style="border:1px solid black " onClick="judgeMove()">&nbsp;
  </DIV>
  <br><br>
  <DIV style="background-color:#CCCCCC; padding:5px">
   <INPUT type="button" value=" 删 除 " style="border:1px solid black " onClick="deleteSelectItem(document.getElementById('left'));deleteSelectItem(document.getElementById('right'))">
  </div>
</FORM>

<!---->
<p>
<hr>
<br>
<!---->

</BODY>
<SCRIPT language="javascript">
function judgeMove()
{
 var arrRadio = document.getElementsByName("ifAll");
 var valOfRadio;
 for(var i=0; i<arrRadio.length; i++)
 {
  if(arrRadio[i].checked)
  {
   valOfRadio = arrRadio[i].value;
   break;
  }
 }
 
 if(valOfRadio == "left")
  moveAll(document.getElementById("right"),document.getElementById("left"));
 if(valOfRadio == "right")
  moveAll(document.getElementById("left"),document.getElementById("right"));
}
</SCRIPT>

 

winsock select 服务端模型源码

  • 2007年12月07日 14:23
  • 1.23MB
  • 下载

phoenix select 查询源码分析

phoenix select 查询源码分析如下执行一个Sql的查询语句ResultSet rst = conn.createStatement().executeQuery("select * fro...

Linux/Unix IO多路复用之select网络编程(含源码)

Linux/Unix IO多路复用之select网络编程(含源码) 前言 本章节是用基本的Linux/Unix基本函数加上select调用编写一个完整的服务器和客户端例子,可在Linux(...

jquery插件select2源码解读(三) options

在这一小节,我们开始详细的阐述select2插件是怎么从初始化到生成的。 看代码: define([ 'jquery', './options', './utils', './ke...

模拟select源码

  • 2015年01月20日 10:21
  • 40KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js源码--select的应用
举报原因:
原因补充:

(最多只允许输入30个字)