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 相关文章推荐
GreyBox技术总结(转)
Nov 23 Javascript
JavaScript操作XML 使用百度RSS作为新闻源示例
Feb 17 Javascript
js时间日期格式化封装函数
Dec 02 Javascript
Node.js的npm包管理器基础使用教程
May 26 Javascript
bootstrap监听滚动实现头部跟随滚动
Nov 08 Javascript
原生js FileReader对象实现图片上传本地预览效果
Mar 27 Javascript
vue-router 权限控制的示例代码
Sep 21 Javascript
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
Dec 14 Javascript
Angular5集成eventbus的示例代码
Jul 19 Javascript
JS实现滚动条触底加载更多
Sep 19 Javascript
小程序实现投票进度条
Nov 20 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
Jun 05 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
聊天室php&amp;mysql(六)
2006/10/09 PHP
动态加载script文件的两种方法
2013/08/15 Javascript
Javascript中的Array数组对象详谈
2014/03/03 Javascript
简介JavaScript中strike()方法的使用
2015/06/08 Javascript
JavaScript实现Base64编码转换
2016/04/23 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
2016/12/20 Javascript
vue实现全选、反选功能
2020/11/17 Javascript
Javascript中从学习bind到实现bind的过程
2018/01/05 Javascript
vue项目打包部署_nginx代理访问方法详解
2018/09/20 Javascript
微信小程序 wxParse插件显示视频问题
2019/09/27 Javascript
详解Vue中的MVVM原理和实现方法
2020/07/15 Javascript
解决vue请求接口第一次成功,第二次失败问题
2020/09/08 Javascript
[01:01:24]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[54:28]EG vs OG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python读取html中指定元素生成excle文件示例
2014/04/03 Python
跟老齐学Python之眼花缭乱的运算符
2014/09/14 Python
Windows下安装python2.7及科学计算套装
2015/03/05 Python
Python实现PS滤镜中马赛克效果示例
2018/01/20 Python
python:print格式化输出到文件的实例
2018/05/14 Python
Python简单过滤字母和数字的方法小结
2019/01/09 Python
对Python中创建进程的两种方式以及进程池详解
2019/01/14 Python
django中SMTP发送邮件配置详解
2019/07/19 Python
Python openpyxl模块原理及用法解析
2020/01/19 Python
Python matplotlib画曲线例题解析
2020/02/07 Python
pytorch中图像的数据格式实例
2020/02/11 Python
django自定义非主键自增字段类型详解(auto increment field)
2020/03/30 Python
Django用内置方法实现简单搜索功能的方法
2020/12/18 Python
详解Python遍历列表时删除元素的正确做法
2021/01/07 Python
canvas需要在标签里直接定义宽高
2014/12/17 HTML / CSS
西尔斯百货官网:Sears
2016/09/06 全球购物
庆八一活动方案
2014/01/25 职场文书
物流管理系毕业生求职信
2014/06/03 职场文书
初中班主任心得体会
2016/01/07 职场文书
python制作图形界面的2048游戏, 基于tkinter
2021/04/06 Python
用Python编写简单的gRPC服务的详细过程
2021/07/04 Python
关于JavaScript轮播图的实现
2021/11/20 Javascript