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 相关文章推荐
js 实现浏览历史记录示例
Apr 20 Javascript
JavaScript及jquey实现多个数组的合并操作
Sep 06 Javascript
对比分析json及XML
Nov 28 Javascript
JS组件Bootstrap Table使用方法详解
Feb 02 Javascript
仿iframe效果Aajx文件上传实例
Nov 18 Javascript
详解打造 Vue.js 可复用组件
Mar 24 Javascript
如何在AngularJs中调用第三方插件库
May 21 Javascript
微信小程序 本地图片按照屏幕尺寸处理
Aug 04 Javascript
react native实现往服务器上传网络图片的实例
Aug 07 Javascript
详解vue+css3做交互特效的方法
Nov 20 Javascript
简单了解小程序+node梳理登陆流程
Jun 24 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
Sep 02 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
将酷狗krc歌词解析并转换为lrc歌词php源码
2014/06/20 PHP
深入探究PHP的多进程编程方法
2015/08/18 PHP
php实现word转html的方法
2016/01/22 PHP
PHP命令空间namespace及use的用法小结
2017/11/27 PHP
php微信开发之关注事件
2018/06/14 PHP
一个对于js this关键字的问题
2007/01/09 Javascript
对采用动态原型方式无法展示继承机制得思考
2009/12/04 Javascript
javascript 全选与全取消功能的实现代码
2012/12/23 Javascript
js控制滚动条缓慢滚动到顶部实现代码
2013/03/20 Javascript
js判断上传文件类型判断FileUpload文件类型代码
2014/05/20 Javascript
js简单实现交换Li的值
2014/05/22 Javascript
js使用post 方式打开新窗口
2015/02/26 Javascript
JavaScript跨平台的开源框架NativeScript
2015/03/24 Javascript
AngularJs基本特性解析(一)
2016/07/21 Javascript
jQuery事件处理的特征(事件命名机制)
2016/08/23 Javascript
基本DOM节点操作
2017/01/17 Javascript
简单好用的nodejs 爬虫框架分享
2017/03/26 NodeJs
node app 打包工具pkg的具体使用
2019/01/17 Javascript
图文详解vue框架安装步骤
2019/02/12 Javascript
vue滚动插件better-scroll使用详解
2019/10/18 Javascript
[02:34]肉山说——泡妞篇
2014/09/16 DOTA
[01:12]快闪回顾DOTA2亚洲邀请赛(DAC) 静候2018新征程开启
2018/03/11 DOTA
python生成器表达式和列表解析
2016/03/10 Python
Python列表list操作符实例分析【标准类型操作符、切片、连接字符、列表解析、重复操作等】
2017/07/24 Python
python音频处理用到的操作的示例代码
2017/10/27 Python
Pandas之排序函数sort_values()的实现
2019/07/09 Python
Django实现简单的分页功能
2021/02/22 Python
CSS3弹性盒模型开发笔记(一)
2016/04/26 HTML / CSS
CSS3实现背景透明文字不透明的示例代码
2018/06/25 HTML / CSS
Speedo美国:澳大利亚顶尖泳衣制造商
2016/08/03 全球购物
手术室护士自我鉴定
2013/10/14 职场文书
力学专业毕业生自荐信
2013/11/17 职场文书
社区中秋节活动方案
2014/01/29 职场文书
会议通知范文
2015/04/15 职场文书
2015年高二班主任工作总结
2015/05/25 职场文书
反四风问题学习心得体会
2016/01/22 职场文书