最近使用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 }