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 相关文章推荐
插件:检测javascript的内存泄漏
Mar 04 Javascript
js类式继承的具体实现方法
Dec 31 Javascript
setTimeout自动触发一个js的方法
Jan 15 Javascript
jQuery实现购物车计算价格功能的方法
Mar 25 Javascript
详解AngularJS中的http拦截
Feb 09 Javascript
AngularJS上拉加载问题解决方法
May 23 Javascript
jquery网页日历显示控件calendar3.1使用详解
Nov 24 Javascript
JavaScript中匿名函数的递归调用
Jan 22 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
Aug 24 Javascript
Vue 禁用浏览器的前进后退操作
Sep 04 Javascript
VUE项目实现主题切换的多种方法
Nov 26 Vue.js
vue中div禁止点击事件的实现
Apr 02 Vue.js
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 curl模拟post请求小实例
2013/11/13 PHP
Symfony2使用第三方库Upload制作图片上传实例详解
2016/02/04 PHP
Extjs学习笔记之六 面版
2010/01/08 Javascript
Jquery修改页面标题title其它JS失效的解决方法
2014/10/31 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
2015/05/18 Javascript
jQuery实现的仿select功能代码
2015/08/19 Javascript
jQuery实现输入框下拉列表树插件特效代码分享
2015/08/27 Javascript
网页中JS函数自动执行常用三种方法
2016/03/30 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
2016/11/09 Javascript
原生ajax处理json格式数据的实例代码
2016/12/25 Javascript
jQuery日程管理控件glDatePicker用法详解
2017/03/29 jQuery
JS中的数组转变成JSON格式字符串的方法
2017/05/09 Javascript
vue 录制视频并压缩视频文件的方法
2018/07/27 Javascript
详解js加减乘除精确计算
2019/03/19 Javascript
js定义类的方法示例【ES5与ES6】
2019/07/30 Javascript
js与jquery获取input输入框中的值实例讲解
2020/02/27 jQuery
javascript设计模式 ? 桥接模式原理与应用实例分析
2020/04/13 Javascript
关于vue-cli3打包代码后白屏的解决方案
2020/09/02 Javascript
浅析Python中将单词首字母大写的capitalize()方法
2015/05/18 Python
Python模块搜索概念介绍及模块安装方法介绍
2015/06/03 Python
Python的Tornado框架实现图片上传及图片大小修改功能
2016/06/30 Python
Python实现mysql数据库更新表数据接口的功能
2017/11/19 Python
Django JWT Token RestfulAPI用户认证详解
2019/01/23 Python
PyTorch加载预训练模型实例(pretrained)
2020/01/17 Python
Python字典深浅拷贝与循环方式方法详解
2020/02/09 Python
python用700行代码实现http客户端
2021/01/14 Python
Auchan Direct波兰:欧尚在线杂货店
2016/10/19 全球购物
成教毕业生自我鉴定
2013/10/23 职场文书
测控技术自荐信
2014/06/05 职场文书
校园文明标语
2014/06/13 职场文书
小学语文复习计划
2015/01/19 职场文书
大学班干部竞选稿
2015/11/20 职场文书
生产实习心得体会范文
2016/01/22 职场文书
2016年禁毒宣传活动总结
2016/04/05 职场文书
pycharm部署django项目到云服务器的详细流程
2021/06/29 Python
Spring Boot 的创建和运行示例代码详解
2022/07/23 Java/Android