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高级程序设计 DOM学习笔记
Sep 10 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
Jul 18 Javascript
json格式数据的添加,删除及排序方法
Jan 21 Javascript
javascript每日必学之循环
Feb 19 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
Oct 26 Javascript
jquery实现多次上传同一张图片
Jan 09 Javascript
基于js 本地存储(详解)
Aug 16 Javascript
bootstrap fileinput实现文件上传功能
Aug 23 Javascript
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
Dec 14 Javascript
原生JS进行前后端同构
Apr 22 Javascript
JavaScript实现微信红包算法及问题解决方法
Apr 26 Javascript
微信小程序位置授权处理方法
Jun 13 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面向对象全攻略 (六)__set() __get() __isset() __unset()的用法
2009/09/30 PHP
php中chdir()函数用法实例
2014/11/13 PHP
PHP封装的PDO数据库操作类实例
2017/06/21 PHP
PHPExcel 修改已存在Excel的方法
2018/05/03 PHP
jsTree树控件(基于jQuery, 超强悍)[推荐]
2009/09/01 Javascript
jquery 操作DOM案例代码分享
2012/04/05 Javascript
js每隔5分钟执行一次ajax请求的实现方法
2013/11/27 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
2014/04/25 Javascript
js 设置缓存及获取设置的缓存
2014/05/08 Javascript
实例代码详解jquery.slides.js
2015/11/16 Javascript
jQuery编写设置和获取颜色的插件
2017/01/09 Javascript
Angular将填入表单的数据渲染到表格的方法
2017/09/22 Javascript
JavaScript Date对象应用实例分享
2017/10/30 Javascript
vue下history模式刷新后404错误解决方法
2018/08/18 Javascript
vue路由权限校验功能的实现代码
2020/06/07 Javascript
python判断、获取一张图片主色调的2个实例
2014/04/10 Python
python实现ping的方法
2015/07/06 Python
Python中序列的修改、散列与切片详解
2017/08/27 Python
Python通过命令开启http.server服务器的方法
2017/11/04 Python
Python GUI Tkinter简单实现个性签名设计
2018/06/19 Python
PyCharm的设置方法和第一个Python程序的建立
2019/01/16 Python
在Django下测试与调试REST API的方法详解
2019/08/29 Python
3种适用于Python的疯狂秘密武器及原因解析
2020/04/29 Python
使用pth文件添加Python环境变量方式
2020/05/26 Python
完美解决jupyter由于无法import新包的问题
2020/05/26 Python
简单聊聊H5的pushState与replaceState的用法
2018/04/03 HTML / CSS
德国知名健康零食网上商店:Seeberger
2017/07/27 全球购物
Asics日本官网:鬼冢八喜郎创立的跑鞋运动品牌
2017/10/18 全球购物
会计专业的自荐信
2013/12/12 职场文书
房屋改造计划书
2014/01/10 职场文书
高中语文教学反思
2014/01/16 职场文书
老同学聚会感言
2014/02/23 职场文书
质量保证书
2015/01/17 职场文书
2015年暑期社会实践活动总结
2015/03/27 职场文书
爱国之歌(8首)
2019/09/29 职场文书
分析设计模式之模板方法Java实现
2021/06/23 Java/Android