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

2016-02-19 14:37 14 1 收藏

下面是个简单易学的Jquery操作Select 简单方便 一个js插件搞定教程,图老师小编详细图解介绍包你轻松学会,喜欢的朋友赶紧get起来吧!

【 tulaoshi.com - Web开发 】

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

来源:https://www.tulaoshi.com/n/20160219/1607383.html

延伸阅读
标签: Web开发
代码如下: input type=text id=abutton onclick="Session.save('a',a.value);"button onclick="alert(Session.load('a'))" body SCRIPT LANGUAGE="JavaScript" !-- var Session={ isinit:false, init:function(){ SessionObj = document.createElement('input'); SessionObj...
标签: Web开发
先去官网下载jQuery Timers插件 ,然后引用到html中。这里是1.2 version 代码如下: script src="../Javascripts/Plugins/jquery.timers-1.2.js" type="text/javascript"/script 然后是HTML,我们可以放一个hidden 的server control存值用,当然这个随你了。 代码如下: asp:HiddenField runat="server" / h1 jQuery Timers Te...
标签: Web开发
我现在还不会写持久层,就用这种方法加上存储过程用,我感觉还比较爽,希望大家多多指教 public class clsdb {      public clsdb()  {   //   // TODO: 在此处添加构造函数逻辑   //  } //数据库连接     public static SqlCo...
标签: Web开发
//设定那个选项被选中 select.options[i].selected=true select.value="value" select.selectedIndex = index; //创建新的Option对象 new Option(text,value) new option(text,value,defaultSelected,selected text:字符串,指定option对象的text属性(即option/option之间的文字) value:字符串,指定option对象的value属性 defaultSelected:布...
标签: Web开发
//改變時的事件 代码如下: $("#testSelect").change(function(){ //事件發生 jQuery('option:selected', this).each(function(){ //印出選到多個值 alert(this.value); }); }); //印出選到的項目 代码如下: 法1:$("select#Clubs").children("[@selected]").each(function(){ alert(this.text); }); 法2:$("#selBags").va...

经验教程

665

收藏

86
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部