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文件,然后你就可以使用这些方法了

相关文章

  • jQuery Easyui datagrid editor为combobox时指定数据源实例

    jQuery Easyui datagrid editor为combobox时指定数据源实例

    当在datagrid行内部应用添加编辑操作时,引入combobox是非常方便的操作,这篇文章主要介绍了jQuery Easyui datagrid editor为combobox时指定数据源实例,有兴趣的可以了解一下。
    2016-12-12
  • jquery实现右键菜单插件

    jquery实现右键菜单插件

    本文给大家分享的是使用jquery实现模拟右键菜单插件的方法和代码分享,十分的实用,有需要的小伙伴可以参考下。
    2015-03-03
  • 11款新鲜的jQuery插件[附所有demo下载]

    11款新鲜的jQuery插件[附所有demo下载]

    每天都会有新的jQuery插件诞生,这里和大家分享最新出炉的11款在实际项目中可能用到的jQuery插件,提供整理后的实例下载。
    2011-01-01
  • 无限树Jquery插件zTree的常用功能特性总结

    无限树Jquery插件zTree的常用功能特性总结

    这篇文章主要对无限树Jquery插件zTree的常用功能特性总结,ztree的语法结构是基于key-value的形式配置,需要的朋友可以参考下
    2014-09-09
  • jQuery Validate表单验证入门学习

    jQuery Validate表单验证入门学习

    这篇文章主要介绍了jQuery Validate表单验证入门知识,该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • 基于jquery编写分页插件

    基于jquery编写分页插件

    这篇文章主要为大家详细介绍了基于jquery编写分页插件的相关资料,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • 快速实现jQuery多级菜单效果

    快速实现jQuery多级菜单效果

    这篇文章主要教大家如何快速实现jQuery多级菜单效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • Jquery 分页插件之Jquery Pagination

    Jquery 分页插件之Jquery Pagination

    实用jQuery分页特效插件jquery.pagination.js,基于jQuery实现,本文给大家分享jquery分页插件之jquery pagination,需要的朋友可以参考下
    2015-08-08
  • 基于jQuery实现自动轮播旋转木马特效

    基于jQuery实现自动轮播旋转木马特效

    这篇文章主要介绍了基于jQuery实现自动轮播旋转木马特效,图片轮播效果特别适合做产品展示,感兴趣的小伙伴可以参考下。
    2015-11-11
  • jQuery EasyUI Panel面板组件使用详解

    jQuery EasyUI Panel面板组件使用详解

    这篇文章主要为大家详细介绍了jQuery EasyUI Panel面板组件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02

最新评论