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事件监听机制(事件捕获)总结
Aug 08 Javascript
JavaScript设计模式之单件模式介绍
Dec 28 Javascript
javascript顺序加载图片的方法
Jul 18 Javascript
Position属性之relative用法
Dec 14 Javascript
JavaScript计划任务后台运行的方法
Dec 18 Javascript
JavaScript实现的SHA-1加密算法完整实例
Feb 02 Javascript
利用AJAX实现WordPress中的文章列表及评论的分页功能
May 17 Javascript
webpack4 + react 搭建多页面应用示例
Aug 03 Javascript
详解vue 自定义marquee无缝滚动组件
Apr 09 Javascript
微信小程序点击滚动到指定位置的实现
May 22 Javascript
js实现九宫格布局效果
May 28 Javascript
JavaScript日期库date-fn.js使用方法解析
Sep 09 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/01 无线电
我的群发邮件程序
2006/10/09 PHP
php多文件上传实现代码
2014/02/20 PHP
PHP面向对象程序设计方法实例详解
2016/12/24 PHP
PHP rmdir()函数的用法总结
2019/07/02 PHP
给moz-firefox下添加IE方法和属性
2007/04/10 Javascript
js function使用心得
2010/05/10 Javascript
再论Javascript下字符串连接的性能
2011/03/05 Javascript
JavaScript实现复制功能各浏览器支持情况实测
2013/07/18 Javascript
css样式标签和js语法属性区别
2013/11/06 Javascript
node.js中的querystring.escape方法使用说明
2014/12/10 Javascript
node.js中的fs.linkSync方法使用说明
2014/12/15 Javascript
JavaScript 动态加载脚本和样式的方法
2015/04/13 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
2015/04/25 Javascript
KnockoutJs快速入门教程
2016/05/16 Javascript
jQuery获取同级元素的简单代码
2016/07/09 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
2017/03/09 Javascript
JavaScript之json_动力节点Java学院整理
2017/06/29 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
2019/08/16 Javascript
微信小程序的引导页实现代码
2020/06/24 Javascript
Vue select 绑定动态变量的实例讲解
2020/10/22 Javascript
[45:25]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
wxPython窗口中文乱码解决方法
2014/10/11 Python
Django静态资源URL STATIC_ROOT的配置方法
2014/11/08 Python
详解Python命令行解析工具Argparse
2016/04/20 Python
Python 中导入csv数据的三种方法
2018/11/01 Python
基于树莓派的语音对话机器人
2019/06/17 Python
Python实现的统计文章单词次数功能示例
2019/07/08 Python
Python3 批量扫描端口的例子
2019/07/25 Python
python openvc 裁剪、剪切图片 提取图片的行和列
2019/09/19 Python
关于HTML5你必须知道的28个新特性,新技巧以及新技术
2012/05/28 HTML / CSS
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
2016/03/22 HTML / CSS
J2EE面试题
2016/03/14 面试题
详解如何解决使用JSON.stringify时遇到的循环引用问题
2021/03/23 Javascript
户外活动总结范文
2014/04/30 职场文书
孩子满月酒答谢词
2015/09/30 职场文书