注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

网事

备忘录

 
 
 

日志

 
 

Jquery操作select   

2010-01-15 15:38:25|  分类: javascript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

以下是操作 下拉列表的常用功能:

1.获取列表项中候选项的数目。

2.获得选中项的索引值。

3.获得当前选中项的值

4.设定选择值

5.设定选择项

...

  1 //得到select项的个数   

  2 jQuery.fn.size = function(){   

  3     return jQuery(this).get(0).options.length;   

  4 }   

  5 

  6 //获得选中项的索引   

  7 jQuery.fn.getSelectedIndex = function(){   

  8     return jQuery(this).get(0).selectedIndex;   

  9 }   

 10 

 11 //获得当前选中项的文本   

 12 jQuery.fn.getSelectedText = function(){   

 13     if(this.size() == 0) return "下拉框中无选项";   

 14     else{   

 15         var index = this.getSelectedIndex();         

 16         return jQuery(this).get(0).options[index].text;   

 17     }   

 18 }   

 19 

 20 //获得当前选中项的值   

 21 jQuery.fn.getSelectedValue = function(){   

 22     if(this.size() == 0)    

 23         return "下拉框中无选中值";   

 24        

 25     else 

 26         return jQuery(this).val();   

 27 }   

 28 

 29 //设置select中值为value的项为选中   

 30 jQuery.fn.setSelectedValue = function(value){   

 31     jQuery(this).get(0).value = value;   

 32 }   

 33 

 34 //设置select中文本为text的第一项被选中   

 35 jQuery.fn.setSelectedText = function(text)   

 36 {   

 37     var isExist = false;   

 38     var count = this.size();   

 39     for(var i=0;i<count;i++)   

 40     {   

 41         if(jQuery(this).get(0).options[i].text == text)   

 42         {   

 43             jQuery(this).get(0).options[i].selected = true;   

 44             isExist = true;   

 45             break;   

 46         }   

 47     }   

 48     if(!isExist)   

 49     {   

 50         alert("下拉框中不存在该项");   

 51     }   

 52 }   

 53 //设置选中指定索引项   

 54 jQuery.fn.setSelectedIndex = function(index)   

 55 {   

 56     var count = this.size();       

 57     if(index >= count || index < 0)   

 58     {   

 59         alert("选中项索引超出范围");   

 60     }   

 61     else 

 62     {   

 63         jQuery(this).get(0).selectedIndex = index;   

 64     }   

 65 }   

 66 //判断select项中是否存在值为value的项   

 67 jQuery.fn.isExistItem = function(value)   

 68 {   

 69     var isExist = false;   

 70     var count = this.size();   

 71     for(var i=0;i<count;i++)   

 72     {   

 73         if(jQuery(this).get(0).options[i].value == value)   

 74         {   

 75             isExist = true;   

 76             break;   

 77         }   

 78     }   

 79     return isExist;   

 80 }   

 81 //向select中添加一项,显示内容为text,值为value,如果该项值已存在,则提示   

 82 jQuery.fn.addOption = function(text,value)   

 83 {   

 84     if(this.isExistItem(value))   

 85     {   

 86         alert("待添加项的值已存在");   

 87     }   

 88     else 

 89     {   

 90         jQuery(this).get(0).options.add(new Option(text,value));   

 91     }   

 92 }   

 93 //删除select中值为value的项,如果该项不存在,则提示   

 94 jQuery.fn.removeItem = function(value)   

 95 {       

 96     if(this.isExistItem(value))   

 97     {   

 98         var count = this.size();           

 99         for(var i=0;i<count;i++)   

100         {   

101             if(jQuery(this).get(0).options[i].value == value)   

102             {   

103                 jQuery(this).get(0).remove(i);   

104                 break;   

105             }   

106         }           

107     }   

108     else 

109     {   

110         alert("待删除的项不存在!");   

111     }   

112 }   

113 //删除select中指定索引的项   

114 jQuery.fn.removeIndex = function(index)   

115 {   

116     var count = this.size();   

117     if(index >= count || index < 0)   

118     {   

119         alert("待删除项索引超出范围");   

120     }   

121     else 

122     {   

123         jQuery(this).get(0).remove(index);   

124     }   

125 }   

126 //删除select中选定的项   

127 jQuery.fn.removeSelected = function()   

128 {   

129     var index = this.getSelectedIndex();   

130     this.removeIndex(index);   

131 }   

132 //清除select中的所有项   

133 jQuery.fn.clearAll = function()   

134 {   

135     jQuery(this).get(0).options.length = 0;   

136 } 

  评论这张
 
阅读(247)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018