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 相关文章推荐
解决extjs grid 不随窗口大小自适应的改变问题
Jan 26 Javascript
加随机数引入脚本不让浏览器读取缓存
Sep 04 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
Jan 30 Javascript
学习javascript面向对象 理解javascript对象
Jan 04 Javascript
javascript实现一个简单的弹出窗
Feb 22 Javascript
JavaScript实现显示函数调用堆栈的方法
Apr 21 Javascript
基于Vuejs框架实现翻页组件
Jun 29 Javascript
图文详解Javascript中的上下文和作用域
Feb 15 Javascript
vue-cli axios请求方式及跨域处理问题
Mar 28 Javascript
JS解析后台返回的JSON格式数据实例
Aug 06 Javascript
详解微信小程序开发用户授权登陆
Apr 24 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
Jun 29 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
global.php
2006/12/09 PHP
PHP 常用函数库和一些实用小技巧
2009/01/01 PHP
用jQuery实现一些导航条切换,显示隐藏的实例代码
2013/06/08 Javascript
在javascript中实现函数数组的方法
2013/12/25 Javascript
详解javascript中的事件处理
2015/11/06 Javascript
JS实现队列与堆栈的方法
2016/04/21 Javascript
js中DOM三级列表(代码分享)
2017/03/20 Javascript
详解webpack 多页面/入口支持&amp;公共组件单独打包
2017/06/29 Javascript
JS实现按钮颜色切换效果
2020/09/05 Javascript
Vuejs中使用markdown服务器端渲染的示例
2017/11/22 Javascript
nodejs实现截取上传视频中一帧作为预览图片
2017/12/10 NodeJs
vue上传图片到oss的方法示例(图片带有删除功能)
2018/09/27 Javascript
在移动端使用vue-router和keep-alive的方法示例
2018/12/02 Javascript
记一次用vue做的活动页的方法步骤
2019/04/11 Javascript
js实现表单项的全选、反选及删除操作示例
2020/06/05 Javascript
深入分析在Python模块顶层运行的代码引起的一个Bug
2014/07/04 Python
Python中list初始化方法示例
2016/09/18 Python
python编程测试电脑开启最大线程数实例代码
2018/02/09 Python
Python KMeans聚类问题分析
2018/02/23 Python
Python实现输出某区间范围内全部素数的方法
2018/05/02 Python
python中的二维列表实例详解
2018/06/19 Python
解决pycharm 远程调试 上传 helpers 卡住的问题
2019/06/27 Python
纯CSS3实现3D旋转书本效果
2016/03/21 HTML / CSS
html5设计原理(推荐收藏)
2014/05/17 HTML / CSS
澳大利亚领先的孕妇服装品牌:Mamaway
2018/08/14 全球购物
化工专业应届生求职信
2013/11/08 职场文书
最新党员思想汇报
2014/01/01 职场文书
医学生职业生涯规划书范文
2014/03/13 职场文书
保险专业求职信
2014/07/07 职场文书
咖啡店创业计划书范文
2014/09/15 职场文书
个人工作表现自我评价
2015/03/06 职场文书
个人工作年终总结
2015/03/09 职场文书
汽车销售合同文本
2019/08/08 职场文书
CSS3 制作的彩虹按钮样式
2021/04/11 HTML / CSS
浅谈Python魔法方法
2021/06/28 Java/Android
Python+SeaTable实现计算两个日期间的工作日天数
2022/07/07 Python