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   }
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值