`
nakupanda
  • 浏览: 416284 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

js项目,一个对select框操作工具

PHPXHTML.net工作 
阅读更多
demo:http://www.yespy.net/badboy/SelectController/

已实现:
单选
全选
全不选
反选
返回指定位置/选中元素的值/文本
移除指定位置元素
移除所有元素
移除选中
移除未选元素
两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>
  • scdemo.rar (3.3 KB)
  • 描述: demo
  • 下载次数: 19
分享到：
| 使用javascript操作多选select框时遇到的问 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    select 增加搜索框

    在网页设计和开发中，`select`...`Chosen`库不仅提供了搜索功能，还支持多选、宽度自适应等特性，是实现高级下拉列表的一个强大工具。在实际项目中，可以根据具体需求进行调整和定制，以满足用户对易用性和效率的需求。

    js select框美化插件设置多种风格select美化列表框

    总的来说，js select框美化插件是提升网页界面视觉体验的重要工具。通过不同的风格设置，如U-Box、Mac和TM2008，我们可以让原本单调的选择框变得生动且吸引人。在实际项目中，根据设计要求选择合适的风格，并结合...

    jquery select 样式框架

    总的来说，"jQuery Select样式框架"为开发者提供了一个强大且灵活的工具，以改善网页中的select元素，提升用户界面的美观性和交互性。无论是个人项目还是企业应用，都可以从中受益，快速实现专业级别的下拉菜单设计...

    bootstrap-select下拉选择搜索框，可以多选和单选

    总之，Bootstrap Select是一个强大的下拉选择组件，它结合了Bootstrap的风格和实用功能，适用于创建具有搜索、多选功能的下拉列表，对于提高用户在网页上的操作效率具有显著作用。通过以上介绍，你应该已经对如何...

    A_jquery+select框图片选择器点击图片给表单select框赋值Java实用源码整理learns

    在本资源中，我们主要探讨的是一个基于jQuery的图片选择器插件，它与HTML的select元素相结合，实现用户点击图片后将所选图片对应的值填充到表单的select框中。这个功能对于提高用户体验，特别是在需要用户选择图标...

    自定义select选择框（很漂亮很强大，推荐）

    "dreamback-selectorjs" 是这个自定义 Select 组件的名称，它很可能是一个开源项目，可以在GitHub上找到相关的源代码和文档。开发者可以将这个组件引入到自己的项目中，通过简单的配置就能实现一个具有吸引力且功能...

    JQ JS javascript 多选 多选下拉框 select bootstrap-select

    jQuery是一个广泛使用的JavaScript库，它提供了丰富的DOM操作和事件处理功能，使开发者能更便捷地操纵页面元素。 Bootstrap是流行的前端开发框架，它的设计风格简洁且响应式，包含了一系列预定义的CSS类和...

    SelectBox下拉复选框多选插件

    对于“SelectBox下拉复选框多选插件”，这意味着它是一个独立的JavaScript或CSS库，可以轻松集成到任何项目中，为下拉框添加多选和搜索功能。 5. **搜索功能**：此插件的一个关键特性是搜索功能。在大量选项的下拉...

    select选择框小插件

    本项目是一个基于jQuery编写的`select`选择框小插件，旨在提升用户体验，简化开发者对`select`元素的操作。 jQuery是一个广泛使用的JavaScript库，它通过简洁的API极大地方便了DOM操作、事件处理、动画制作以及Ajax...

    xm-select下拉选择框 v1.2.4.zip

    总结，XM-SELECT下拉选择框v1.2.4版本是一个强大且易用的前端组件，无论是在日常开发还是学术研究中，都能发挥重要作用。通过深入学习和实践，开发者不仅可以提升自己的技能，还能为项目带来更好的用户体验。

    jquery input文本框模拟select选择框获取选定

    在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了JavaScript代码的编写，尤其是在处理DOM操作、事件处理以及动画效果等方面。对于标题提到的"jquery input文本框模拟select选择框获取选定"，这是...

    前端项目-tether-select.zip

    本文将深入探讨一个名为“tether-select”的前端项目，它旨在为开发者提供一种风格化且基于Tether库的选择元素。Tether是一个强大的JavaScript库，主要用于定位DOM元素，使它们在页面滚动或窗口尺寸变化时保持相对...

    mobileSelect.js.rar

    今天我们将深入探讨一个名为“mobileSelect.js”的JavaScript库，它专为移动端H5设计，旨在实现快速、简洁的底部弹窗选择功能。 “mobileSelect.js”是一个轻量级的JavaScript插件，主要针对移动设备的H5页面设计。...

    ChosenSelect_美化H5Select选择框_

    总之，Chosen是一个强大的工具，能够极大地提升`&lt;select&gt;`元素的视觉效果和用户体验。通过合理的配置和使用，它可以为你的H5页面增添一份专业且现代的触感。结合CSS和JavaScript的使用，你可以定制自己的样式和交互...

    javascript 操作两个select，左右选择值。

    这就是一个简单的JavaScript实现，允许用户在两个Select下拉框之间移动选择的值。在实际项目中，可能还需要处理更多细节，如错误处理、验证、用户反馈等，但以上代码已经提供了一个基础框架。如果你在项目中使用了像...

    layui第三方插件xm-select

    而“xm-select”是layui生态中的一个第三方插件，专为实现下拉多选框功能而设计。在layui的项目中集成xm-select，可以极大地增强用户界面的交互性和功能多样性。 首先，我们来看“xm-select”的核心特性。它提供了...

    jQuery实现select样式美化 jQselect.js

    总之，"jQuery实现select样式美化 jQselect.js" 是一个旨在提升网页交互体验的工具，它通过jQuery实现了对传统`&lt;select&gt;`标签的样式增强，使得开发者可以轻松创建符合网站设计风格、具有良好交互性的选择框组件。

    jquery select插件带搜索框的下拉选择框代码

    在网页开发中，jQuery是一个非常流行的JavaScript库，它简化了DOM操作、事件处理以及Ajax交互。而`select`元素是HTML中的一个基本组件，通常用于创建下拉选择列表。然而，原生的`&lt;select&gt;`元素功能有限，不支持搜索...

    QUI框架多种样式的SELECT控件.rar

    首先，`QUI框架`是一个专为前端开发设计的框架，它提供了丰富的组件和工具，简化了UI元素的创建和管理，使得开发者能够快速构建出美观且响应式的用户界面。在这个框架中，`SELECT`控件被赋予了多种样式和功能，以...

Magicbox
Global site tag (gtag.js) - Google Analytics