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