Jquery操作Select 简单方便 一个js插件搞定


Posted in Javascript onNovember 12, 2009

这里是js的代码:

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
然后再引入这个js文件,然后你就可以使用这些方法了
Javascript 相关文章推荐
JS+XML 省份和城市之间的联动实现代码
Oct 14 Javascript
js setattribute批量设置css样式
Nov 26 Javascript
关于html+ashx开发中几个问题的解决方法
Jul 18 Javascript
js实现拉伸拖动iframe的具体代码
Aug 03 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
Apr 12 Javascript
JavaScript实现控制打开文件另存为对话框的方法
Apr 17 Javascript
js clearInterval()方法的定义和用法
Nov 11 Javascript
CSS3 media queries结合jQuery实现响应式导航
Sep 30 Javascript
JS中对数组元素进行增删改移的方法总结
Dec 15 Javascript
JS字符串与二进制的相互转化实例代码详解
Jun 28 Javascript
Vue的transition-group与Virtual Dom Diff算法的使用
Dec 09 Javascript
javascript实现简易数码时钟
Mar 30 Javascript
jquery控制listbox中项的移动并排序
Nov 12 #Javascript
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
Nov 12 #Javascript
两个select之间option的互相添加操作(jquery实现)
Nov 12 #Javascript
XHTML下,JS浮动代码失效的问题
Nov 12 #Javascript
把html页面的部分内容保存成新的html文件的jquery代码
Nov 12 #Javascript
Javascript 定时器调用传递参数的方法
Nov 12 #Javascript
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
Nov 12 #Javascript
You might like
我的论坛源代码(十)
2006/10/09 PHP
ThinkPHP自动验证失败的解决方法
2011/06/09 PHP
php Session存储到Redis的方法
2013/11/04 PHP
php实现模拟登陆方正教务系统抓取课表
2015/05/19 PHP
PHP实现的简单路由和类自动加载功能
2018/03/13 PHP
浅谈Laravel POST,PUT,PATCH 路由的区别
2019/10/15 PHP
extjs4 treepanel动态改变行高度示例
2013/12/17 Javascript
Javascript实现简单二级下拉菜单实例
2014/06/15 Javascript
jquery插件之文字间歇自动向上滚动效果代码
2016/02/25 Javascript
JS+Canvas绘制时钟效果
2020/08/20 Javascript
详解nodejs 文本操作模块-fs模块(二)
2016/12/22 NodeJs
深入理解Vue.js源码之事件机制
2017/09/27 Javascript
vue实现仿淘宝结账页面实例代码
2017/11/08 Javascript
利用Node.js检测端口是否被占用的方法
2017/12/07 Javascript
在 React、Vue项目中使用SVG的方法
2018/02/09 Javascript
关于微信小程序bug记录与解决方法
2018/08/15 Javascript
vue实现局部刷新的实现示例
2019/04/16 Javascript
vue router导航守卫(router.beforeEach())的使用详解
2019/04/19 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
2019/04/20 Javascript
create-react-app中添加less支持的实现
2019/11/15 Javascript
Python实现的检测web服务器健康状况的小程序
2014/09/17 Python
python接口自动化测试之接口数据依赖的实现方法
2019/04/26 Python
python打开音乐文件的实例方法
2020/07/21 Python
Python类的继承super相关原理解析
2020/10/22 Python
法国太阳镜店:Sunglasses Shop
2016/08/27 全球购物
Python里面search()和match()的区别
2016/09/21 面试题
Java面试题汇总
2015/12/06 面试题
高分子材料与工程专业个人求职信
2013/12/15 职场文书
社区优秀志愿者材料
2014/02/02 职场文书
中餐厅主管的职责范文
2014/02/04 职场文书
商务英语广告词大全
2014/03/18 职场文书
家长会演讲稿
2014/04/26 职场文书
公路绿化方案
2014/05/12 职场文书
检查机关党的群众路线个人整改措施
2014/10/04 职场文书
财务检查整改报告
2014/11/06 职场文书
Go调用Rust方法及外部函数接口前置
2022/06/14 Golang