js项目,一个对select框操作工具
demo:
http://www.yespy.net/badboy/SelectController/
已实现:
单选
全选
全不选
反选
返回指定位置/选中元素的值/文本
移除指定位置元素
移除所有元素
移除选中
移除未选元素
两select控件间内容复制(复制/覆盖/移动)
准备实现:
于页面任何地方初始化,初步计划将初始化工作置于onLoad事件序列中.
已实现:
单选
全选
全不选
反选
返回指定位置/选中元素的值/文本
移除指定位置元素
移除所有元素
移除选中
移除未选元素
两select控件间内容复制(复制/覆盖/移动)
准备实现:
于页面任何地方初始化,初步计划将初始化工作置于onLoad事件序列中.
<!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=utf-8" />
<title>无标题文档</title>
</head>
<body>
<script language="javascript">
function removeSelectedASC()
{
obj = document.getElementById('select1');
for(var i=0;i<obj.length;i++)
{
if(obj.options[i].selected)
obj.remove(i);
}
}
function removeSelectedDESC()
{
obj = document.getElementById('select1');
for(var i=obj.length-1;i>=0;i--)
{
if(obj.options[i].selected)
obj.remove(i);
}
}
</script>
<form method="post" name="form1" id="form1">
<select multiple="multiple" style="height:400px;width:100%;" name="select1" id="select1">
<?php
for($i=1;$i<=1000;$i++){
?>
<option value="HELLO<?=$i?>_value">HELLO<?=$i?>_label</option>
<?php
}
?>
</select>
<select multiple="multiple" style="height:400px;width:100%;" name="select2" id="select2">
<option value="BBCC">BBCC</option>
<option value="DDEE">DDEE</option>
</select>
<input type="button" value="remove selected by ASC" onClick="removeSelectedASC()" />
<input type="button" value="remove selected by DESC" onClick="removeSelectedDESC()" />
</form>
<script language="javascript">
/***********************OBJECT SelectController*************************************/
function SelectController()
{
var selectObject = null; //要控制的select对象
//selectObject的getter和setter
this.setSelectObject = function(obj)
{
this.selectObject = obj;
}
this.getSelectObject = function()
{
return this.selectObject;
}
/****************选择函数 开始***********************/
//选择/取消指定位置的元素
//pos:位置
//selectType:true/false
this.selectAt = function(pos,selectType)
{
pos = parseInt(pos);
if(pos<this.selectObject.length&&pos>=0&&typeof(selectType)=="boolean")
this.selectObject.options[pos].selected=selectType;
}
//全选
this.selectAll = function()
{
for(var i=this.selectObject.length-1;i>=0;i--)
this.selectAt(i,true);
}
//全不选
this.selectNone = function()
{
for(var i=this.selectObject.length-1;i>=0;i--)
this.selectAt(i,false);
}
//反选
this.selectReverse = function()
{
for(var i=this.selectObject.length-1;i>=0;i--)
this.selectObject.options[i].selected==false?this.selectAt(i,true):this.selectAt(i,false);
}
/****************选择函数 结束***********************/
/****************内容函数 开始***********************/
//移除指定位置元素
this.removeAt = function(pos)
{
if(pos<this.selectObject.length&&pos>=0)
this.selectObject.remove(pos);
}
//移除所有元素
this.removeAll = function()
{
for(var i=this.selectObject.length-1;i>=0;i--)
this.removeAt(i);
}
//移除选中元素
this.removeSelected = function()
{
for(var i=this.selectObject.length-1;i>=0;i--)
{
if(this.selectObject.options[i].selected)
this.removeAt(i);
}
}
//移除未选中元素
this.removeOthers = function()
{
for(var i=this.selectObject.length-1;i>=0;i--)
{
if(!this.selectObject.options[i].selected)
this.removeAt(i);
}
}
//增加一个元素
//参数Option
this.addOption = function(option)
{
this.selectObject.options.add(option);
}
//增加一个元素
//参数text
//参数value
this.add = function(text,value)
{
var option = new Option(text,value);
this.addOption(option);
}
/****************内容函数 结束***********************/
/****************取值函数 开始***********************/
//返回第一个选中元素的位置
this.getIndex = function()
{
return this.selectObject.selectedIndex;
}
//返回所有选中元素的位置
this.getIndexes = function()
{
var indexes = new Array();
for(var i=0;i<this.selectObject.length;i++)
{
if(this.getOption(i).selected)
indexes.push(i);
}
return indexes;
}
//返回指定元系的Option对象
this.getOption = function(index)
{
if(index>=0&&index<this.selectObject.length)
{
return this.selectObject.options[index];
}
}
//返回一个值
//参数为空时返回选定项的值
//参数不为空时返回指定索引的值
this.getValue = function()
{
return null;
}
this.getValue = function(index)
{
//通过检查参数长度实现重载
var alen = arguments.length;
if(alen==0)
{
if(this.getIndex()>=0)
{
var value = this.getOption(this.getIndex()).value;
return value;
}
else
{
return null;
}
}
else if(alen==1)
{
if(index>=0&&index<this.selectObject.length)
{
var value = this.getOption(index).value;
return value;
}
else
{
return null;
}
}
else
{
return null;
}
}
//返回一个文本
//参数为空时返回选定项的文本
//参数不为空时返回指定索引的文本
this.getText = function()
{
return null;
}
this.getText = function(index)
{
//通过检查参数长度实现重载
var alen = arguments.length;
if(alen==0)
{
if(this.getIndex()>=0)
{
var value = this.getOption(this.getIndex()).text;
return value;
}
else
{
return null;
}
}
else if(alen==1)
{
if(index>=0&&index<this.selectObject.length)
{
var value = this.getOption(index).text;
return value;
}
else
{
return null;
}
}
else
{
return null;
}
}
/****************取值函数 结束***********************/
/****************外交函数 开始***********************/
//复制本对象所有元素到目标对象
//obj:目标对象,必须是SelectController类型
//copyType:复制选项 w先清除目标对象元素,m同时移除本对象元素
//返回成功复制数
this.copyAll = function(target,copyType)
{
var counter = 0;
copyType = copyType.toLowerCase();
if(target instanceof SelectController)
{
targetSelectObject = target.getSelectObject();
//如果是覆写模式并且源对象有元素则先清除目标select控件原来的元素
if(copyType.indexOf("w")!=-1&&this.selectObject.length>0)
{
target.removeAll();
}
for(var i=0;i<this.selectObject.length;i++)
{
target.add(this.getText(i),this.getValue(i));
counter++;
}
if(copyType.indexOf("m")!=-1)
{
this.removeAll();
}
return counter;
}
else
{
return 0;
}
}
//复制本对象选中的元素到目标对象
//obj:目标对象,必须是SelectController类型
//copyType:复制选项 w先清除目标对象元素,m同时移除本对象元素
//返回成功复制数
this.copySelected = function(target,copyType)
{
var counter = 0;
copyType = copyType.toLowerCase();
if(target instanceof SelectController)
{
targetSelectObject = target.getSelectObject();
//如果是覆写模式则先清除目标select控件原来的元素
if(copyType.indexOf("w")!=-1&&this.getIndexes.length>0)
{
target.removeAll();
}
for(var i=0;i<this.selectObject.length;i++)
{
if(this.getOption(i).selected)
{
target.add(this.getText(i),this.getValue(i));
counter++;
}
}
if(copyType.indexOf("m")!=-1)
{
this.removeSelected();
}
return counter;
}
else
{
return 0;
}
}
/****************外交函数 结束***********************/
}
var obj1 = new SelectController();
obj1.setSelectObject(document.getElementById('select1'));
var obj2 = new SelectController();
obj2.setSelectObject(document.getElementById('select2'));
</script>
<input type="button" onclick="alert(obj1.getValue());" value="show value" />
<input type="button" onclick="alert(obj1.getText());" value="show text" />
<input type="button" onclick="alert(obj1.getIndex())" value="get selected index" />
<input type="button" onclick="alert(obj1.getIndexes().length)" value="get selected indexes length" />
<input type="button" onclick="obj1.selectAll()" value="select all" />
<input type="button" onclick="obj1.selectNone()" value="select none" />
<input type="button" onclick="obj1.selectReverse()" value="select reverse" />
<input type="button" onclick="obj1.selectAt(1.1,true)" value="select 1" />
<input type="button" onclick="obj1.selectAt(1,false)" value="disselect 1" />
<input type="button" onclick="obj1.removeAll()" value="remove all" />
<input type="button" onclick="obj1.removeSelected()" value="remove selected" />
<input type="button" onclick="obj1.removeOthers()" value="remove others" />
<input type="button" onclick="obj1.removeAt(1)" value="remove 1" />
<input type="button" onclick="alert(obj1.copyAll(obj2,'wm'))" value="copy all" />
<input type="button" onclick="alert(obj1.copySelected(obj2,'wm'))" value="copy selected" />
</body>
</html>