jQuery select控制插件


Posted in Javascript onAugust 17, 2009

和大家分享一下代码:
JavaScript代码

//得到select项的个数 
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文件,再引入jquery.liu.select.js文件,然后就可调用该插件的方法。比如,我要清除id为selEmail的下拉框中的所有项,那么我就可以这么操作:$("#selEmail").clearAll();
说明:该插件中的方法在ie7和firefox中验证通过,有错误和需要改进的地方还希望大家批评指正。
Javascript 相关文章推荐
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
Jan 02 Javascript
jquery实现漂浮在网页右侧的qq在线客服插件示例
May 13 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
May 14 Javascript
javascript如何操作HTML下拉列表标签
Aug 20 Javascript
简单谈谈JavaScript的同步与异步
Dec 31 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
Jan 20 Javascript
Angularjs的$http异步删除数据详解及实例
Jul 27 Javascript
node.js 模块和其下载资源的镜像设置的方法
Sep 06 Javascript
基于Vue实现图片在指定区域内移动的思路详解
Nov 11 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
Nov 26 Javascript
BootStrap modal实现拖拽功能
Dec 01 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
Mar 25 Javascript
javascript 无提示关闭窗口脚本
Aug 17 #Javascript
javascript addBookmark 加入收藏 多浏览器兼容
Aug 15 #Javascript
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
Aug 15 #Javascript
javascript 客户端验证上传图片的大小(兼容IE和火狐)
Aug 15 #Javascript
js中的window.open返回object的错误的解决方法
Aug 15 #Javascript
JavaScript 提升运行速度之循环篇 译文
Aug 15 #Javascript
jQuery ui 1.7更新小结
Aug 15 #Javascript
You might like
在PHP中操作Excel实例代码
2010/04/29 PHP
php 团购折扣计算公式
2011/11/24 PHP
检查用户名是否已在mysql中存在的php写法
2014/01/20 PHP
分享微信扫码支付开发遇到问题及解决方案-附Ecshop微信支付插件
2015/08/23 PHP
PHP支付宝当面付2.0代码
2018/12/21 PHP
不用写JS也能使用EXTJS视频演示
2008/12/29 Javascript
JQuery学习笔录 简单的JQuery
2012/04/09 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
2013/04/01 Javascript
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
2013/05/24 Javascript
JS二维数组的定义说明
2014/03/03 Javascript
jquery获取radio值(单选组radio)
2014/10/16 Javascript
学习AngularJs:Directive指令用法(完整版)
2016/04/26 Javascript
Bootstrap模态窗口源码解析
2017/02/08 Javascript
laravel5.4+vue+element简单搭建的示例代码
2017/08/29 Javascript
echarts整合多个类似option的方法实例
2018/07/10 Javascript
Vue下拉框回显并默认选中随机问题
2018/09/06 Javascript
微信小程序自定义toast的实现代码
2018/11/16 Javascript
使用Django的模版来配合字符串翻译工作
2015/07/27 Python
django2+uwsgi+nginx上线部署到服务器Ubuntu16.04
2018/06/26 Python
对dataframe数据之间求补集的实例详解
2019/01/30 Python
Python数据分析pandas模块用法实例详解
2019/11/20 Python
Pycharm2020最新激活码|永久激活(附最新激活码和插件的详细教程)
2020/09/29 Python
浅谈html5 响应式布局
2014/12/24 HTML / CSS
潘多拉意大利官方网上商城:网上选购PANDORA珠宝
2018/10/07 全球购物
意大利中国电子产品购物网站:Geekmall.com
2019/09/30 全球购物
实习护理工作自我评价
2013/09/25 职场文书
岗位职责的构建方法
2014/02/01 职场文书
教师试用期自我鉴定
2014/02/12 职场文书
民事诉讼代理委托书
2014/10/08 职场文书
离婚协议书范文
2015/01/26 职场文书
房屋产权证明书
2015/06/19 职场文书
公司周年庆典致辞
2015/07/30 职场文书
小学毕业感言200字
2015/07/30 职场文书
2016大学军训通讯稿
2015/11/25 职场文书
使用numpy nonzero 找出非0元素
2021/05/14 Python
Vue3中的Refs和Ref详情
2021/11/11 Vue.js