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入门教程(12) js对象化编程
Jan 31 Javascript
Javascript this指针
Jul 30 Javascript
js parentElement和offsetParent之间的区别
Mar 23 Javascript
引用外部js乱码问题分析及解决方案
Apr 12 Javascript
jquery动态添加删除div 具体实现
Jul 20 Javascript
Sea.JS知识总结
May 05 Javascript
javascript 网页进度条简单实例
Feb 22 Javascript
vue-router 路由基础的详解
Oct 17 Javascript
从零开始搭建webpack+react开发环境的详细步骤
May 18 Javascript
RequireJS用法简单示例
Aug 20 Javascript
微信小程序绑定手机号获取验证码功能
Oct 22 Javascript
uni-app如何实现增量更新功能
Jan 03 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开发留言板的CRUD(增,删,改,查)操作
2012/04/19 PHP
PHP使用get_headers函数判断远程文件是否存在的方法
2014/11/28 PHP
WordPress中给文章添加自定义字段及后台编辑功能区域
2015/12/19 PHP
深入解析WordPress中加载模板的get_template_part函数
2016/01/11 PHP
Yii2 rbac权限控制之rule教程详解
2016/06/23 PHP
通过身份证号得到出生日期和性别的js代码
2009/11/23 Javascript
JavaScript 10件让人费解的事情
2010/02/15 Javascript
Jquery截取中文字符串的实现代码
2010/12/22 Javascript
js判断IE浏览器版本过低示例代码
2013/11/22 Javascript
js判断为空Null与字符串为空简写方法
2014/02/24 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
2015/02/05 Javascript
js实现的简单radio背景颜色选择器代码
2015/08/18 Javascript
Bootstrap table两种分页示例
2016/12/23 Javascript
jquery DataTable实现前后台动态分页
2017/06/17 jQuery
Angular4 Select选择改变事件的方法
2018/10/09 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
2018/10/20 Javascript
vue获取验证码倒计时组件
2019/08/26 Javascript
vuex vue简单使用知识点总结
2019/08/29 Javascript
Vue中this.$nextTick的作用及用法
2020/02/04 Javascript
如何通过javaScript去除字符串两端的空白字符
2020/02/06 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
2020/05/03 Javascript
Python中列表、字典、元组、集合数据结构整理
2014/11/20 Python
浅谈Python中chr、unichr、ord字符函数之间的对比
2016/06/16 Python
Python开发SQLite3数据库相关操作详解【连接,查询,插入,更新,删除,关闭等】
2017/07/27 Python
python pandas中DataFrame类型数据操作函数的方法
2018/04/08 Python
Python实现输入二叉树的先序和中序遍历,再输出后序遍历操作示例
2018/07/27 Python
django项目中使用手机号登录的实例代码
2019/08/15 Python
python控制台实现tab补全和清屏的例子
2019/08/20 Python
英国二手物品交易网站:Preloved
2017/10/06 全球购物
精伦电子Java笔试题
2013/01/16 面试题
房地产促销活动方案
2014/03/01 职场文书
学校班班通实施方案
2014/06/11 职场文书
新入职员工工作总结
2015/10/15 职场文书
意外事故赔偿协议书
2016/03/22 职场文书
Nginx中使用Lua脚本与图片的缩略图处理的实现
2022/03/18 Servers
Python如何将list中的string转换为int
2022/07/15 Ruby