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 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值