Jquery中select操作

本文导读：html中的下拉框select是我们经常使用的html标签，下拉框常用操作有：1.获取列表项中候选项的数目；2.获得选中项的索引值；3.获得当前选中项的值；4.设定选择值；5.设定选择项。下面介绍jQuery中操作下拉框select的方法

一、Jquery中select操作的定义

 

JScript 代码    复制

//得到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;   
}

 

二、Jquery中select操作的实例

 

1、jquery获取当前选中select的text值

var checkText=$("#slc1").find("option:selected").text();

 

2、jquery获取当前选中select的value值

var checkValue=$("#slc1").val();

 

3、jquery获取当前选中select的索引值

var index=$("#slc1 ").get(0).selectedIndex;

 

4、jquery获取指定select的最大索引值

var maxIndex=$("#slc1 option:last").attr("index");

 

5、jquery设置索引值为1的项为当前选中项

$("#slc1 ").get(0).selectedIndex=1;

 

6、jquery设置value值2的项为当前选中项

$("#slc1 ").val(2);

 

7、jquery设置text值为"青藤园"的项为当前选中项

$("#slc1 option[text='青园w']").attr("selected", true);

 

8、为指定select下拉框追加一个option（追加到在末尾）

$("#slc2").append(""+i+"");

 

9、为制定select下拉框插入一个option（插入到第一个位置）

$("#slc2").prepend("请选择");

 

10、jquery删除select下拉框的最后一个option

$("#slc2 option:last").remove();

 

11、jquery删除select下拉框索引值为0的option

$("#slc2 option[index='0']").remove();

 

12、jquery删除select下拉框value为2的option

$("#slc2 option[value='2']").remove();

 

13、jquery删除select下拉框text为“青藤园”的option

$("#slc2 option[text='ewew2']").remove();