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 相关文章推荐
广泛收集的jQuery拖放插件集合
Apr 09 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
May 08 Javascript
Javascript动态创建表格及删除行列的方法
May 15 Javascript
利用Angularjs中模块ui-route管理状态的方法
Dec 27 Javascript
jquery设置css样式的多种方法(总结)
Feb 21 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
May 02 Javascript
使用Nuxt.js改造已有项目的方法
Aug 07 Javascript
详解vue-cli下ESlint 配置说明
Sep 03 Javascript
记一次vue去除#问题处理经过小结
Jan 24 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
Sep 17 Javascript
JavaScript监听一个DOM元素大小变化
Apr 26 Javascript
vue实现简单跑马灯效果
May 25 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一些常用的正则表达式字符的一些转换
2008/07/29 PHP
PHP中实现生成静态文件的方法缓解服务器压力
2014/01/07 PHP
php文件压缩之PHPZip类用法实例
2015/06/18 PHP
PHP基于pdo的数据库操作类【可支持mysql、sqlserver及oracle】
2018/05/21 PHP
Laravel定时任务的每秒执行代码
2019/10/22 PHP
利用JS重写Cognos右键菜单的实现代码
2010/04/11 Javascript
jQuery:节点(插入,复制,替换,删除)操作
2013/03/04 Javascript
javascript查找字符串中出现最多的字符和次数的小例子
2013/10/29 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
2014/05/02 Javascript
node.js中的fs.fstat方法使用说明
2014/12/15 Javascript
Javascript基础教程之变量
2015/01/18 Javascript
纯js实现的积木(div层)拖动功能示例
2017/07/19 Javascript
用Webpack构建Vue项目的实践
2017/11/07 Javascript
在vue项目中引入highcharts图表的方法(详解)
2018/03/05 Javascript
微信小程序之分享页面如何返回首页的示例
2018/03/28 Javascript
vue.js实现插入数值与表达式的方法分析
2018/07/06 Javascript
vue 根据数组中某一项的值进行排序的方法
2018/08/30 Javascript
原生js实现瀑布流效果
2020/03/09 Javascript
Python中dictionary items()系列函数的用法实例
2014/08/21 Python
Python实现方便使用的级联进度信息实例
2015/05/05 Python
用Python实现一个简单的多线程TCP服务器的教程
2015/05/05 Python
Python中转换角度为弧度的radians()方法
2015/05/18 Python
Python中使用OpenCV库来进行简单的气象学遥感影像计算
2016/02/19 Python
Python使用Srapy框架爬虫模拟登陆并抓取知乎内容
2016/07/02 Python
谈谈如何手动释放Python的内存
2016/12/17 Python
python3 爬取图片的实例代码
2018/11/06 Python
python 判断字符串中是否含有汉字或非汉字的实例
2019/07/15 Python
Django中的模型类设计及展示示例详解
2020/05/29 Python
澳大利亚在线百货商店:Real Smart
2017/08/13 全球购物
化妆品促销方案
2014/02/24 职场文书
高校教师个人总结
2015/02/10 职场文书
关于召开会议的通知
2015/04/15 职场文书
2019求职信:应届生求职信范文
2019/04/24 职场文书
python基础之爬虫入门
2021/05/10 Python
Redis 的查询很快的原因解析及Redis 如何保证查询的高效
2022/03/16 Redis
【海涛教你打DOTA】虚空假面第一视角骨弓3房29杀
2022/04/01 DOTA