jQuery select控制插件


Posted in Javascript onAugust 17, 2009

和大家分享一下代码:
JavaScript代码

//得到select项的个数 
jQuery.fn.size = function() 
{ 
return jQuery(this).get(0).options.length; 
} 
//获得选中项的索引 
jQuery.fn.getSelectedIndex = function() 
{ 
return jQuery(this).get(0).selectedIndex; 
} 
//获得当前选中项的文本 
jQuery.fn.getSelectedText = function() 
{ 
if(this.size() == 0) 
{ 
return "下拉框中无选项"; 
} 
else 
{ 
var index = this.getSelectedIndex(); 
return jQuery(this).get(0).options[index].text; 
} 
} 
//获得当前选中项的值 
jQuery.fn.getSelectedValue = function() 
{ 
if(this.size() == 0) 
{ 
return "下拉框中无选中值"; 
} 
else 
{ 
return jQuery(this).val(); 
} 
} 
//设置select中值为value的项为选中 
jQuery.fn.setSelectedValue = function(value) 
{ 
jQuery(this).get(0).value = value; 
} 
//设置select中文本为text的第一项被选中 
jQuery.fn.setSelectedText = function(text) 
{ 
var isExist = false; 
var count = this.size(); 
for(var i=0;i<count;i++) 
{ 
if(jQuery(this).get(0).options[i].text == text) 
{ 
jQuery(this).get(0).options[i].selected = true; 
isExist = true; 
break; 
} 
} 
if(!isExist) 
{ 
alert("下拉框中不存在该项"); 
} 
} 
//设置选中指定索引项 
jQuery.fn.setSelectedIndex = function(index) 
{ 
var count = this.size(); 
if(index >= count || index < 0) 
{ 
alert("选中项索引超出范围"); 
} 
else 
{ 
jQuery(this).get(0).selectedIndex = index; 
} 
} 
//判断select项中是否存在值为value的项 
jQuery.fn.isExistItem = function(value) 
{ 
var isExist = false; 
var count = this.size(); 
for(var i=0;i<count;i++) 
{ 
if(jQuery(this).get(0).options[i].value == value) 
{ 
isExist = true; 
break; 
} 
} 
return isExist; 
} 
//向select中添加一项,显示内容为text,值为value,如果该项值已存在,则提示 
jQuery.fn.addOption = function(text,value) 
{ 
if(this.isExistItem(value)) 
{ 
alert("待添加项的值已存在"); 
} 
else 
{ 
jQuery(this).get(0).options.add(new Option(text,value)); 
} 
} 
//删除select中值为value的项,如果该项不存在,则提示 
jQuery.fn.removeItem = function(value) 
{ 
if(this.isExistItem(value)) 
{ 
var count = this.size(); 
for(var i=0;i<count;i++) 
{ 
if(jQuery(this).get(0).options[i].value == value) 
{ 
jQuery(this).get(0).remove(i); 
break; 
} 
} 
} 
else 
{ 
alert("待删除的项不存在!"); 
} 
} 
//删除select中指定索引的项 
jQuery.fn.removeIndex = function(index) 
{ 
var count = this.size(); 
if(index >= count || index < 0) 
{ 
alert("待删除项索引超出范围"); 
} 
else 
{ 
jQuery(this).get(0).remove(index); 
} 
} 
//删除select中选定的项 
jQuery.fn.removeSelected = function() 
{ 
var index = this.getSelectedIndex(); 
this.removeIndex(index); 
} 
//清除select中的所有项 
jQuery.fn.clearAll = function() 
{ 
jQuery(this).get(0).options.length = 0; 
}

使用的时候先引入jquery.js文件,再引入jquery.liu.select.js文件,然后就可调用该插件的方法。比如,我要清除id为selEmail的下拉框中的所有项,那么我就可以这么操作:$("#selEmail").clearAll();
说明:该插件中的方法在ie7和firefox中验证通过,有错误和需要改进的地方还希望大家批评指正。
Javascript 相关文章推荐
有关DOM元素与事件的3个谜题
Nov 11 Javascript
js 通用javascript函数库整理
Aug 14 Javascript
防止xss和sql注入:JS特殊字符过滤正则
Apr 18 Javascript
全面解析Bootstrap图片轮播效果
Dec 03 Javascript
学习javascript面向对象 javascript实现继承的方式
Jan 04 Javascript
js删除局部变量的实现方法
Jun 25 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
Oct 21 Javascript
JavaScript实现简单生成随机颜色的方法
Sep 21 Javascript
详解vue项目中调用百度地图API使用方法
Apr 25 Javascript
如何基于JS截获动态代码
Dec 25 Javascript
在vue中created、mounted等方法使用小结
Jul 21 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
Dec 16 Javascript
javascript 无提示关闭窗口脚本
Aug 17 #Javascript
javascript addBookmark 加入收藏 多浏览器兼容
Aug 15 #Javascript
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
Aug 15 #Javascript
javascript 客户端验证上传图片的大小(兼容IE和火狐)
Aug 15 #Javascript
js中的window.open返回object的错误的解决方法
Aug 15 #Javascript
JavaScript 提升运行速度之循环篇 译文
Aug 15 #Javascript
jQuery ui 1.7更新小结
Aug 15 #Javascript
You might like
php类中的$this,static,final,const,self这几个关键字使用方法
2015/12/14 PHP
php封装json通信接口详解及实例
2017/03/07 PHP
PHP设计模式之观察者模式定义与用法示例
2018/08/04 PHP
ie与ff下的event事件使用介绍
2013/11/25 Javascript
Jquery getJSON方法详细分析
2013/12/26 Javascript
JS常用字符串处理方法应用总结
2014/05/22 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
2014/06/26 Javascript
javascript中indexOf技术详解
2015/05/07 Javascript
jQuery实现Email邮箱地址自动补全功能代码
2015/11/03 Javascript
javascript随机抽取0-100之间不重复的10个数
2016/02/25 Javascript
js编写当天简单日历效果【实现代码】
2016/05/03 Javascript
AngularJS实现树形结构(ztree)菜单示例代码
2016/09/18 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
2016/12/03 Javascript
JavaScript实现多重继承的方法分析
2018/01/09 Javascript
利用Blob进行文件上传的完整步骤
2018/08/02 Javascript
浅析vue中的nextTick
2020/12/28 Vue.js
python数据结构之二叉树的建立实例
2014/04/29 Python
Linux中安装Python的交互式解释器IPython的教程
2016/06/13 Python
python实现的二叉树定义与遍历算法实例
2017/06/30 Python
对numpy数据写入文件的方法讲解
2018/07/09 Python
python 批量修改/替换数据的实例
2018/07/25 Python
对python条件表达式的四种实现方法小结
2019/01/30 Python
Python3.5 win10环境下导入kera/tensorflow报错的解决方法
2019/12/19 Python
python中strip(),lstrip(),rstrip()函数的使用讲解
2020/11/17 Python
Python 生成短8位唯一id实战教程
2021/01/13 Python
详解HTML5中ol标签的用法
2015/09/08 HTML / CSS
森海塞尔美国官网:Sennheiser耳机与耳麦
2017/07/19 全球购物
Marmot土拨鼠官网:美国专业户外运动品牌
2018/01/11 全球购物
strstr()的简单实现
2013/09/26 面试题
实验教师岗位职责
2014/02/13 职场文书
教师党员一句话承诺
2014/03/28 职场文书
促销活动总结范文
2014/04/30 职场文书
档案管理员岗位职责
2015/02/12 职场文书
四大名著读书笔记
2015/06/25 职场文书
MySQL中出现乱码问题的终极解决宝典
2021/05/26 MySQL
nginx反向代理配置去除前缀案例教程
2021/07/26 Servers