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实现a标签超链接提交form表单的方法
Jun 24 Javascript
angular.js之路由的选择方法
Sep 24 Javascript
json定义及jquery操作json的方法
Sep 29 Javascript
JS实现类似百叶窗下拉菜单效果
Dec 30 Javascript
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
详解Vue学习笔记入门篇之组件的内容分发(slot)
Jul 17 Javascript
详解如何用typescript开发koa2的二三事
Nov 13 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
Mar 01 Javascript
利用angular自动编译andriod APK的绕坑经历分享
Mar 08 Javascript
微信提示 在浏览器打开 效果实现过程解析
Sep 10 Javascript
这样回答继承可能面试官更满意
Dec 10 Javascript
JavaScript实现酷炫的鼠标拖尾特效
Feb 18 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/10/22 PHP
学习JS面向对象成果 借国庆发布个最新作品与大家交流
2009/10/03 Javascript
jquery 学习之二 属性(类)
2010/11/25 Javascript
原生javaScript做得动态表格(注释写的很清楚)
2013/12/29 Javascript
JS获取DropDownList的value值与text值的示例代码
2014/01/07 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
2014/03/05 Javascript
JavaScript分析、压缩工具JavaScript Analyser
2014/12/31 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
2015/09/24 Javascript
基于javascript实现随机颜色变化效果
2016/01/14 Javascript
浅析jquery与checkbox的checked属性的问题
2016/04/27 Javascript
Bootstrap 组件之按钮(二)
2016/05/11 Javascript
react实现pure render时bind(this)隐患需注意!
2017/03/09 Javascript
vue复合组件实现注册表单功能
2017/11/06 Javascript
vue 实现axios拦截、页面跳转和token 验证
2018/07/17 Javascript
Next.js实现react服务器端渲染的方法示例
2019/01/06 Javascript
js实现小星星游戏
2020/03/23 Javascript
[01:06:07]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS CIS
2014/05/22 DOTA
[01:21]DOTA2 新英雄 森海飞霞
2020/12/18 DOTA
python实现基本进制转换的方法
2015/07/11 Python
详解Python编程中对Monkey Patch猴子补丁开发方式的运用
2016/05/27 Python
Django验证码的生成与使用示例
2017/05/20 Python
Python下使用Scrapy爬取网页内容的实例
2018/05/21 Python
详解如何为eclipse安装合适版本的python插件pydev
2018/11/04 Python
Pandas:Series和DataFrame删除指定轴上数据的方法
2018/11/10 Python
使用python实现简单五子棋游戏
2019/06/18 Python
python实现最小二乘法线性拟合
2019/07/19 Python
django如何通过类视图使用装饰器
2019/07/24 Python
django框架模型层功能、组成与用法分析
2019/07/30 Python
在keras中对单一输入图像进行预测并返回预测结果操作
2020/07/09 Python
Django日志及中间件模块应用案例
2020/09/10 Python
Linux如何为某个操作添加别名
2015/02/05 面试题
运动会通讯稿500字
2014/02/20 职场文书
运动会宣传稿100字
2015/07/23 职场文书
MySQL的join buffer原理
2021/04/29 MySQL
Mysql中mvcc各场景理解应用
2022/08/05 MySQL
HTML5页面打开微信小程序功能实现
2022/09/23 HTML / CSS