Jquery操作Select 简单方便 一个js插件搞定

 更新时间:2009年11月12日 22:33:31   转载 作者:  
Jquery其实本身可以操作select表单,但是由于比较反锁,没有.net 控件那样去操作方便,我在网上Google了一会,发现了一个不错的专门操作select的插件,很好,使用过了,感觉蛮不错的。
这里是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+canvas实现图片裁剪

    使用JavaScript+canvas实现图片裁剪

    这篇文章主要介绍了使用JavaScript+canvas实现图片裁剪的方法,需要的朋友可以参考下
    2015-01-01
  • 关于jquery中动态增加select,事件无效的快速解决方法

    关于jquery中动态增加select,事件无效的快速解决方法

    下面小编就为大家带来一篇关于jquery中动态增加select,事件无效的快速解决方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • jquery 实现滚动条下拉时无限加载的简单实例

    jquery 实现滚动条下拉时无限加载的简单实例

    下面小编就为大家带来一篇jquery 实现滚动条下拉时无限加载的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • js弹出层之1:JQuery.Boxy (二)

    js弹出层之1:JQuery.Boxy (二)

    在《弹出层之1:JQuery.Boxy (一)》中讲到了JQuery.Boxy的基本用法,本次讲下手动创建实例,new一个boxy对象是很容易的,传递一些参数对象就能满足不同的需求了。
    2011-10-10
  • jQuery菜单插件superfish使用指南

    jQuery菜单插件superfish使用指南

    Superfish是一款Jquery插件,它能非常容易的建立复杂的多级下拉菜单,Superfish使用也非常普遍。你可能用Superfish实现多种菜单效果。
    2015-04-04
  • jQuery实现查找最近父节点的方法

    jQuery实现查找最近父节点的方法

    这篇文章主要介绍了jQuery实现查找最近父节点的方法,涉及jQuery针对元素节点操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • jquery判断浏览器类型的代码

    jquery判断浏览器类型的代码

    用jquery来判断浏览器类型,如果只是仅仅为了判断浏览器的类型而使用该方法,那么不建议使用,只是在你已经使用了jquery才建议使用,因为没必要因为这么小的一个功能就加载那么大的类库吧
    2012-11-11
  • jquery+php后台实现省市区联动功能示例

    jquery+php后台实现省市区联动功能示例

    这篇文章主要介绍了jquery+php后台实现省市区联动功能,涉及jQuery事件响应及页面元素属性动态变换,以及ajax后台动态交互相关操作技巧,需要的朋友可以参考下
    2019-05-05
  • jQuery日程管理控件glDatePicker用法详解

    jQuery日程管理控件glDatePicker用法详解

    这篇文章主要介绍了jQuery日程管理控件glDatePicker用法,结合具体实例形式分析了jQuery控件glDatePicker的简单使用技巧与相关注意事项,需要的朋友可以参考下
    2017-03-03
  • jquery实现手机端单店铺购物车结算删除功能

    jquery实现手机端单店铺购物车结算删除功能

    本文主要介绍了js实现手机端单店铺购物车结算删除功能的示例代码,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02

最新评论