js项目,一个对select框操作工具-优快云博客

demo:[url]http://www.yespy.net/badboy/SelectController/[/url]

已实现:
单选
全选
全不选
反选
返回指定位置/选中元素的值/文本
移除指定位置元素
移除所有元素
移除选中
移除未选元素
两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>