jquery select

最近使用JQuery来编写前端js脚本，涉及到依据下拉框的值确定其他下拉框中数据项。需要实现对下拉框中候选项的添加删除等，使用js写的话简直会死人的。还好使用JQuery。以下是操作 下拉列表的常用功能：

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  }



本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/SuperBoo/archive/2009/11/20/4839761.aspx