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 相关文章推荐
使用AngularJS创建自定义的过滤器的方法
Jun 18 Javascript
js实现表单提交后不重新刷新当前页面
Nov 30 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
Jan 23 Javascript
详解VueJs前后端分离跨域问题
May 24 Javascript
vue脚手架中配置Sass的方法
Jan 04 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
Apr 24 Javascript
微信小程序如何使用globalData的方法
Jun 06 Javascript
策略模式实现 Vue 动态表单验证的方法
Sep 16 Javascript
JS中比较两个Object数组是否相等方法实例
Nov 11 Javascript
浅析Vue 防抖与节流的使用
Nov 14 Javascript
JavaScript canvas实现雪花随机动态飘落
Feb 08 Javascript
小程序选项卡以及swiper套用(跨页面)
Jun 19 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递归返回值时出现的问题解决办法
2013/02/19 PHP
PHP自动生成后台导航网址的最佳方法
2013/08/27 PHP
jQuery Ajax之$.get()方法和$.post()方法
2009/10/12 Javascript
一个简单的JS鼠标悬停特效具体方法
2013/06/17 Javascript
javascript获取xml节点的最大值(实现代码)
2013/12/11 Javascript
JavaScript中的立即执行函数表达式介绍
2015/03/15 Javascript
JS实现简单的图书馆享元模式实例
2015/06/30 Javascript
javascript实现rgb颜色转换成16进制格式
2015/07/10 Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
2015/08/27 Javascript
JS+CSS实现简易实用的滑动门菜单效果
2015/09/18 Javascript
javascript下使用Promise封装FileReader
2016/02/19 Javascript
纯js实现手风琴效果
2020/04/17 Javascript
Javascript将JSON日期格式化
2016/08/23 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
2016/09/05 Javascript
javascript判断firebug是否开启的方法
2016/11/23 Javascript
原生js实现中奖信息无间隙滚动效果
2017/01/18 Javascript
React组件重构之嵌套+继承及高阶组件详解
2018/07/19 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
2020/04/21 Javascript
js属性对象的hasOwnProperty方法的使用
2021/02/05 Javascript
[01:14]3.19DOTA2发布会 三代刀塔人第二代
2014/03/25 DOTA
python中使用序列的方法
2015/08/03 Python
PyQt5每天必学之关闭窗口
2018/04/19 Python
python使用if语句实现一个猜拳游戏详解
2019/08/27 Python
使用 Python 写一个简易的抽奖程序
2019/12/08 Python
python 实现保存最新的三份文件,其余的都删掉
2019/12/22 Python
如何利用Python写个坦克大战
2020/11/18 Python
HTML5 input新增type属性color颜色拾取器的实例代码
2018/08/27 HTML / CSS
什么是数据抽象
2016/11/26 面试题
办公室经理岗位职责
2014/01/01 职场文书
关于赌博的检讨书
2014/01/24 职场文书
《颐和园》教学反思
2014/02/26 职场文书
生日宴会主持词
2014/03/20 职场文书
班级读书活动总结
2014/06/30 职场文书
学生实习证明范文
2014/09/28 职场文书
2016年社区六一儿童节活动总结
2016/04/06 职场文书
Nginx解决前端访问资源跨域问题的方法详解
2021/03/31 Servers