- 浏览: 416241 次
- 性别:
- 来自: 广州
文章分类
最新评论
-
u010620626:
foreach是最快的,因为php的array内部元素之间有指 ...
[流言终结者] PHP for / foreach / while 性能比较 -
ostrich_sun:
谢楼主
Sybase PowerDesigner 12.5 破解补丁/序列号/注册码 -
xuxueqin29:
为什么我这边用不上
Sybase PowerDesigner 12.5 破解补丁/序列号/注册码 -
sdpfoue:
http://www.php-internals.com/bo ...
[流言终结者] PHP for / foreach / while 性能比较 -
nakupanda:
lovelease 写道nakupanda 写道你应该去阅读一 ...
java调用microsoft translate api webservice
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>
- scdemo.rar (3.3 KB)
- 描述: demo
- 下载次数: 19
发表评论
-
简化Bootstrap3 Modal使用: BootstrapDialog
2013-11-07 16:35 22253使用Bootstrap3 Modal前, 你需要编写一堆HTM ... -
javascript 阻止事件元素默认行为和传播(冒泡)
2011-11-30 15:29 1279document.getElementById('id') ... -
JQUERY图片轮换效果
2011-05-24 10:53 1261转自: http://www.iteye.com/topic/ ... -
JQUERY 提示信息插件
2010-12-04 17:29 1178http://vadikom.com/demos/poshyt ... -
fancybox
2010-06-17 11:49 1373http://fancybox.net -
DOM对象转换为JQuery对象
2010-04-20 21:52 1231$(document.getElementById(" ... -
JQUERY 取 单选框 值
2010-04-08 16:36 1078$('#registerForm input[name=sex ... -
JQUERY 动态加载 JS
2010-04-03 19:34 4231$.getScript("test.js" ... -
一个简单实用的JS/JQuery日历选择控件
2010-03-19 16:30 2015演示地址:http://teddevito.com/demos ... -
一个简单实用的多级JQuery 下拉菜单插件
2010-03-04 11:10 1730http://www.dynamicdrive.com/sty ... -
JQuery 关键字高亮插件
2010-02-25 15:05 767见附件 字符串长度补丁 -
清除页面内容的方法
2010-01-09 22:22 1104document.close(); document.o ... -
javascript查看对象属性
2009-12-21 20:14 2230假设你拿到对象是test for(i in test) ... -
一个使用方便的用于跳转后保持滚动条位置的JS
2009-08-25 08:28 5386使用方法很简单,将这下面的代码存为一个ScrollHolder ... -
js中添加事件的方法
2009-07-12 21:41 1408function addEventHandler(oTar ... -
获得iFrame里的内容
2009-07-12 17:41 1862var iframeElem = parent.docum ... -
javascript检查变量是否已定义
2009-07-01 17:05 1476if (typeof(obj)=='undefined') -
javascript 获取文件大小
2009-05-09 01:22 1899var image=new Image(); ... -
使用javascript操作多选select框时遇到的问题
2009-05-06 16:12 1449假设有一个多选框: <select id=" ... -
javascript中的回车事件
2009-03-25 18:01 2606在onkeydown或onkeypress事件中判断是否按下回 ...
相关推荐
在网页设计和开发中,`select`...`Chosen`库不仅提供了搜索功能,还支持多选、宽度自适应等特性,是实现高级下拉列表的一个强大工具。在实际项目中,可以根据具体需求进行调整和定制,以满足用户对易用性和效率的需求。
总的来说,js select框美化插件是提升网页界面视觉体验的重要工具。通过不同的风格设置,如U-Box、Mac和TM2008,我们可以让原本单调的选择框变得生动且吸引人。在实际项目中,根据设计要求选择合适的风格,并结合...
总的来说,"jQuery Select样式框架"为开发者提供了一个强大且灵活的工具,以改善网页中的select元素,提升用户界面的美观性和交互性。无论是个人项目还是企业应用,都可以从中受益,快速实现专业级别的下拉菜单设计...
总之,Bootstrap Select是一个强大的下拉选择组件,它结合了Bootstrap的风格和实用功能,适用于创建具有搜索、多选功能的下拉列表,对于提高用户在网页上的操作效率具有显著作用。通过以上介绍,你应该已经对如何...
在本资源中,我们主要探讨的是一个基于jQuery的图片选择器插件,它与HTML的select元素相结合,实现用户点击图片后将所选图片对应的值填充到表单的select框中。这个功能对于提高用户体验,特别是在需要用户选择图标...
"dreamback-selectorjs" 是这个自定义 Select 组件的名称,它很可能是一个开源项目,可以在GitHub上找到相关的源代码和文档。开发者可以将这个组件引入到自己的项目中,通过简单的配置就能实现一个具有吸引力且功能...
jQuery是一个广泛使用的JavaScript库,它提供了丰富的DOM操作和事件处理功能,使开发者能更便捷地操纵页面元素。 Bootstrap是流行的前端开发框架,它的设计风格简洁且响应式,包含了一系列预定义的CSS类和...
对于“SelectBox下拉复选框多选插件”,这意味着它是一个独立的JavaScript或CSS库,可以轻松集成到任何项目中,为下拉框添加多选和搜索功能。 5. **搜索功能**:此插件的一个关键特性是搜索功能。在大量选项的下拉...
本项目是一个基于jQuery编写的`select`选择框小插件,旨在提升用户体验,简化开发者对`select`元素的操作。 jQuery是一个广泛使用的JavaScript库,它通过简洁的API极大地方便了DOM操作、事件处理、动画制作以及Ajax...
总结,XM-SELECT下拉选择框v1.2.4版本是一个强大且易用的前端组件,无论是在日常开发还是学术研究中,都能发挥重要作用。通过深入学习和实践,开发者不仅可以提升自己的技能,还能为项目带来更好的用户体验。
在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了JavaScript代码的编写,尤其是在处理DOM操作、事件处理以及动画效果等方面。对于标题提到的"jquery input文本框模拟select选择框获取选定",这是...
本文将深入探讨一个名为“tether-select”的前端项目,它旨在为开发者提供一种风格化且基于Tether库的选择元素。Tether是一个强大的JavaScript库,主要用于定位DOM元素,使它们在页面滚动或窗口尺寸变化时保持相对...
今天我们将深入探讨一个名为“mobileSelect.js”的JavaScript库,它专为移动端H5设计,旨在实现快速、简洁的底部弹窗选择功能。 “mobileSelect.js”是一个轻量级的JavaScript插件,主要针对移动设备的H5页面设计。...
总之,Chosen是一个强大的工具,能够极大地提升`<select>`元素的视觉效果和用户体验。通过合理的配置和使用,它可以为你的H5页面增添一份专业且现代的触感。结合CSS和JavaScript的使用,你可以定制自己的样式和交互...
这就是一个简单的JavaScript实现,允许用户在两个Select下拉框之间移动选择的值。在实际项目中,可能还需要处理更多细节,如错误处理、验证、用户反馈等,但以上代码已经提供了一个基础框架。如果你在项目中使用了像...
而“xm-select”是layui生态中的一个第三方插件,专为实现下拉多选框功能而设计。在layui的项目中集成xm-select,可以极大地增强用户界面的交互性和功能多样性。 首先,我们来看“xm-select”的核心特性。它提供了...
总之,"jQuery实现select样式美化 jQselect.js" 是一个旨在提升网页交互体验的工具,它通过jQuery实现了对传统`<select>`标签的样式增强,使得开发者可以轻松创建符合网站设计风格、具有良好交互性的选择框组件。
在网页开发中,jQuery是一个非常流行的JavaScript库,它简化了DOM操作、事件处理以及Ajax交互。而`select`元素是HTML中的一个基本组件,通常用于创建下拉选择列表。然而,原生的`<select>`元素功能有限,不支持搜索...
首先,`QUI框架`是一个专为前端开发设计的框架,它提供了丰富的组件和工具,简化了UI元素的创建和管理,使得开发者能够快速构建出美观且响应式的用户界面。在这个框架中,`SELECT`控件被赋予了多种样式和功能,以...