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

wxkjvmub894384

wxkjvmub894384

2016-02-19 14:37

下面是个简单易学的Jquery操作Select 简单方便 一个js插件搞定教程,图老师小编详细图解介绍包你轻松学会,喜欢的朋友赶紧get起来吧!
这里是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;icount;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;icount;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;icount;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文件,然后你就可以使用这些方法了
展开更多 50%)
分享

猜你喜欢

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

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

jQuery select控制插件

Web开发
jQuery select控制插件

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

JQuery SELECT单选模拟jQuery.select.js

Web开发
JQuery SELECT单选模拟jQuery.select.js

jquery 简单图片导航插件jquery.imgNav.js

Web开发
jquery 简单图片导航插件jquery.imgNav.js

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

jquery select选中的一个小问题

Web开发
jquery select选中的一个小问题

一个简单的jQuery插件制作 学习过程及实例

Web开发
一个简单的jQuery插件制作 学习过程及实例

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

如何在Linux中安装虚拟化工具llibvirt

如何在Linux中安装虚拟化工具llibvirt

Win7家庭普通版系统下“windows standard”配色方案丢失怎么办

Win7家庭普通版系统下“windows standard”配色方案丢失怎么办
下拉加载更多内容 ↓