您的位置:首页 > Web前端 > jquery > 正文

jQuery如何操作下拉框select

更多 时间:2014-5-26 类别:Web前端 浏览量:2905

jQuery如何操作下拉框select

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

    标签:jQuery下拉框