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实例教程(19) 使用HoTMetal(1)
Dec 23 Javascript
Array.prototype.slice 使用扩展
Jun 09 Javascript
JavaScript的类型转换(字符转数字 数字转字符)
Aug 30 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
Dec 27 Javascript
javascript获取元素离文档各边距离的方法
Feb 13 Javascript
js无法获取到html标签的属性的解决方法
Jul 26 Javascript
es6的数字处理的方法(5个)
Mar 16 Javascript
vuejs 单文件组件.vue 文件的使用
Jul 28 Javascript
vue-router实现tab标签页(单页面)详解
Oct 17 Javascript
利用js实现前后台传送Json的示例代码
Mar 29 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
Sep 25 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
Jun 01 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中的float类型使用说明
2010/07/27 PHP
PHP禁止页面缓存的代码
2011/10/23 PHP
PHP使用array_multisort对多个数组或多维数组进行排序
2014/12/16 PHP
PHP生成条形码大揭秘
2015/09/24 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
基于jquery的让textarea自适应高度的插件
2010/08/03 Javascript
javascript实现日历控件(年月日关闭按钮)
2012/12/12 Javascript
js substr支持中文截取函数代码(中文是双字节)
2013/04/17 Javascript
jQuery Ajax()方法使用指南
2014/11/19 Javascript
基于Jquery实现表单验证
2020/07/20 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
2016/03/11 Javascript
canvas学习之API整理笔记(一)
2016/12/29 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
2017/12/19 jQuery
基于JavaScript实现抽奖系统
2018/01/16 Javascript
剖析Angular Component的源码示例
2018/03/23 Javascript
微信小程序实现图片上传放大预览删除代码
2020/06/28 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
2018/11/21 Javascript
js实现上传图片并显示图片名称
2019/12/18 Javascript
浅析JavaScript预编译和暗示全局变量
2020/09/03 Javascript
python简单猜数游戏实例
2015/07/09 Python
利用numpy和pandas处理csv文件中的时间方法
2018/04/19 Python
Python中一些深不见底的“坑”
2019/06/12 Python
详解python实现交叉验证法与留出法
2019/07/11 Python
django-crontab 定时执行任务方法的实现
2019/09/06 Python
详解python实现可视化的MD5、sha256哈希加密小工具
2020/09/14 Python
基于Python爬取股票数据过程详解
2020/10/21 Python
python 实现ping测试延迟的两种方法
2020/12/10 Python
马克华菲官方商城:Mark Fairwhale
2016/09/04 全球购物
Elemis美国官网:英国的第一豪华护肤品牌
2018/03/15 全球购物
中软Java笔试题
2012/11/11 面试题
电子商务自荐书范文
2014/01/04 职场文书
矿泉水广告词
2014/03/20 职场文书
大学应届毕业生求职信
2014/05/24 职场文书
学校社会实践活动总结
2014/07/03 职场文书
农村文化活动总结
2014/08/28 职场文书
Mysql开启外网访问
2022/05/15 MySQL