select转移工具箱(IE,NS,FF)
来源：互联网 发布：jsp sql的学生管理系统 编辑：程序博客网 时间：2024/06/11 20:56
在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()">
</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>
- select转移工具箱(IE,NS,FF)
- select转移工具箱(IE,NS,FF) （转）
- 获取浏览器版本(支持IE/FF/OP/SF/CHROME/NS)
- 使用函数完成表格奇偶行的颜色设定(IE,NS,FF)
- ----- 日期控件的另一种思路，限制输入格式的日期控件（支持IE，NS，FF 在FF，NS中存在BUG） -----
- 两个select的数据移动，支持IE,ff,google浏览器
- JS对select动态添加options操作【IE&FF兼容】
- input, select 的宽与高怎么兼容IE、FF
- <select>设置css height兼容性，兼容FF/IE/Safari/Chrome...
- IE & FF
- 创建xmldocument对象,并读取xml，绑定到select， ie/ff通用
- 创建xmldocument对象,并读取xml，绑定到select， ie/ff通用
- Select效果(可编辑) FF等非IE浏览器兼容性不好
- FF,IE兼容问题
- 关于FF、IE兼容
- IE和FF兼容
- IE 和 FF
- ff/IE 兼容性问题
- 信息化想要复制不容易
- 趣话中国电影的英文译名[转]
- 一个被冷落的领域
- 系统躲过水土不服
- 不让失败缚住手脚
- select转移工具箱(IE,NS,FF)
- IT起步晚 有缘由
- 项目推动 考核挂帅
- JS中的正则表达式小小的技巧---Test方法的使用
- 冲破阻力 小施策略
- 建立一张纸制度
- 成功贵在屡败屡战
- 上ERP 走自己的路
- 南山
