`

[转]Jquery操作select 收藏

阅读更多

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

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics