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 相关文章推荐
jquery下checked取值问题的解决方法
Aug 09 Javascript
jquery拖动插件(jquery.drag)使用介绍
Jun 18 Javascript
js window.onload 加载多个函数和追加函数详解
Jan 08 Javascript
利用jquery操作Radio方法小结
Oct 20 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
Mar 26 Javascript
AngularJS学习笔记之依赖注入详解
May 16 Javascript
jQueryUI中的datepicker使用方法详解
May 25 Javascript
移动端界面的适配
Jan 11 Javascript
ES6入门教程之Class和Module详解
May 17 Javascript
原生JS实现日历组件的示例代码
Sep 22 Javascript
在微信小程序中使用vant的方法
Jun 07 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
Oct 12 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
终于听上了直流胆调频
2021/03/02 无线电
PHP5/ZendEngine2的改进
2006/10/09 PHP
BBS(php &amp; mysql)完整版(七)
2006/10/09 PHP
简单的过滤字符串中的HTML标记
2006/12/25 PHP
人尽可用的Windows技巧小贴士之下篇
2007/03/22 PHP
php数组函数序列之krsort()- 对数组的元素键名进行降序排序,保持索引关系
2011/11/02 PHP
php读取mysql乱码,用set names XXX解决的原理分享
2011/12/29 PHP
php实现异步数据调用的方法
2015/12/24 PHP
php实现的mysqldb读写分离操作类示例
2017/02/07 PHP
PHP获取类私有属性的3种方法
2020/09/10 PHP
优化JavaScript脚本的性能的几个注意事项
2006/12/22 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
2015/08/30 Javascript
如何用angularjs制作一个完整的表格
2016/01/21 Javascript
JS 对象(Object)和字符串(String)互转方法
2016/05/20 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
2016/08/25 Javascript
JavaScript组件开发之输入框加候选框
2017/03/10 Javascript
Javascript实现找不同色块的游戏
2017/07/17 Javascript
在 Node.js 中使用原生 ES 模块方法解析
2017/09/19 Javascript
原生JavaScrpit中异步请求Ajax实现方法
2017/11/03 Javascript
vue父组件点击触发子组件事件的实例讲解
2018/02/08 Javascript
详解node和ES6的模块导出与导入
2020/02/19 Javascript
0基础学习前端开发的一些建议
2020/07/14 Javascript
Python使用turtule画五角星的方法
2015/07/09 Python
python 删除指定时间间隔之前的文件实例
2018/04/24 Python
Python 实现一个手机号码获取妹子名字的功能
2019/09/25 Python
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
2013/01/06 HTML / CSS
html5视频媒体标签video的使用方法及完整参数说明详解
2019/09/27 HTML / CSS
Under Armour安德玛英国官网:美国高端运动科技品牌
2018/09/17 全球购物
贝斯特韦斯特酒店集团官网:Best Western
2019/01/03 全球购物
新加坡鲜花速递/新加坡网上花店:Ferns N Petals
2020/08/29 全球购物
SQL SERVER面试资料
2013/03/30 面试题
房地产财务管理制度
2014/02/02 职场文书
股东协议书
2014/04/14 职场文书
会计电算化实训报告
2014/11/04 职场文书
2015年团支部年度工作总结
2015/05/27 职场文书
SQL Server作业失败:无法确定所有者是否有服务器访问权限的解决方法
2021/06/30 SQL Server