Jquery其實本身可以操作select表單,但是由于比較反鎖,沒有.net 控件那樣去操作方便,我在網上Google了一會,發現了一個不錯的專門操作select的插件,很好,使用過了,感覺蠻不錯的,所以收藏了起來
這里是js的代碼:
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;
}
使用很簡單,先引入主要的Jquery.js
然后再引入這個js文件,然后你就可以使用這些方法了