随笔 - 42, 文章 - 1, 评论 - 0, 引用 - 0
数据加载中……

Jquery操作select

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

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 } 

posted on 2012-04-05 14:00 段旭 阅读(1139) 评论(0)  编辑  收藏 所属分类: JQuery


只有注册用户登录后才能发表评论。
网站导航: