最近使用JQuery来编写前端js脚本,涉及到依据下拉框的值确定其他下拉框中数据项。需要实现对下拉框中候选项的添加删除等,使用 js写的话简直会死人的。还好使用JQuery。以下是操作 下拉列表的常用功能:
?
1.获取列表项中候选项的数目。
?
2.获得选中项的索引值。
?
3.获得当前选中项的值
?
4.设定选择值
?
5.设定选择项
?
// 得到select项的个数 jQuery.fn.size = function (){ return jQuery( this ).get( 0 ).options.length; } // 获得选中项的索引 jQuery.fn.getSelectedIndex = function (){ return jQuery( this ).get( 0 ).selectedIndex; } // 获得当前选中项的文本 jQuery.fn.getSelectedText = function (){ if ( this .size() == 0 ) return " 下拉框中无选项 " ; else { var index = this .getSelectedIndex(); return jQuery( this ).get( 0 ).options[index].text; } } // 获得当前选中项的值 jQuery.fn.getSelectedValue = function (){ if ( this .size() == 0 ) return " 下拉框中无选中值 " ; else return jQuery( this ).val(); } // 设置select中值为value的项为选中 jQuery.fn.setSelectedValue = function (value){ jQuery( this ).get( 0 ).value = value; } // 设置select中文本为text的第一项被选中 jQuery.fn.setSelectedText = function (text) { var isExist = false ; var count = this .size(); for ( var i = 0 ;i < count;i ++ ) { if (jQuery( this ).get( 0 ).options[i].text == text) { jQuery( this ).get( 0 ).options[i].selected = true ; isExist = true ; break ; } } if ( ! isExist) { alert( " 下拉框中不存在该项 " ); } } // 设置选中指定索引项 jQuery.fn.setSelectedIndex = function (index) { var count = this .size(); if (index >= count || index < 0 ) { alert( " 选中项索引超出范围 " ); } else { jQuery( this ).get( 0 ).selectedIndex = index; } } // 判断select项中是否存在值为value的项 jQuery.fn.isExistItem = function (value) { var isExist = false ; var count = this .size(); for ( var i = 0 ;i < count;i ++ ) { if (jQuery( this ).get( 0 ).options[i].value == value) { isExist = true ; break ; } } return isExist; } // 向select中添加一项,显示内容为text,值为value,如果该项值已存在,则提示 jQuery.fn.addOption = function (text,value) { if ( this .isExistItem(value)) { alert( " 待添加项的值已存在 " ); } else { jQuery( this ).get( 0 ).options.add( new Option(text,value)); } } // 删除select中值为value的项,如果该项不存在,则提示 jQuery.fn.removeItem = function (value) { if ( this .isExistItem(value)) { var count = this .size(); for ( var i = 0 ;i < count;i ++ ) { if (jQuery( this ).get( 0 ).options[i].value == value) { jQuery( this ).get( 0 ).remove(i); break ; } } } else { alert( " 待删除的项不存在! " ); } } // 删除select中指定索引的项 jQuery.fn.removeIndex = function (index) { var count = this .size(); if (index >= count || index < 0 ) { alert( " 待删除项索引超出范围 " ); } else { jQuery( this ).get( 0 ).remove(index); } } // 删除select中选定的项 jQuery.fn.removeSelected = function () { var index = this .getSelectedIndex(); this .removeIndex(index); } // 清除select中的所有项 jQuery.fn.clearAll = function () { jQuery( this ).get( 0 ).options.length = 0 ; }
?