`

一個灰常好用的jquery操作select插件

阅读更多
/*
文件名:jquery.liu.select.js
功能说明:本js文件为jquery类库的一个插件,主要实现对select的操作.
作者:John Liu
编写日期:2008/03/12
*/
//得到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.js文件,再引入jquery.liu.select.js文件,然后就可调用该插件的方法。比如,我要清除id为selEmail的下拉框中的所有项,那么我就可以这么操作:$("#selEmail").clearAll();
   说明:该插件中的方法在ie7和firefox中验证通过,有错误和需要改进的地方还希望大家批评指正。

轉載於 http://www.cnblogs.com/longer/archive/2008/03/13/1103183.html
分享到:
评论

相关推荐

    jquery 超级select插件 v4.0版本

    jQuery超级Select插件v4.0版本是一个强大且灵活的工具,它为Web开发者提供了丰富的功能和定制选项,帮助提升Select元素的用户体验。通过深入理解和合理运用,开发者可以构建出更加便捷、高效的表单交互。无论是在...

    select2(jquery)插件下载

    **jQuery Select2插件详解** Select2是一款基于jQuery...通过以上介绍,我们可以看到jQuery Select2插件的强大之处,它不仅提升了用户体验,也为开发者提供了丰富的定制选项,是构建现代Web应用时不可或缺的一个工具。

    [转]Jquery操作select 收藏

    文件"jQuery-Select-bynet.htm"可能就是一个示例代码或插件的文档,它可能包含了更高级的select操作示例,如模拟多级联动下拉菜单或者自定义的下拉列表样式。 总的来说,掌握jQuery操作select的方法对于前端开发来...

    jquery操作select插件.pdf

    本文将深入解析一个由John Liu编写的jQuery插件——jquery.liu.select.js,该插件专注于对HTML `&lt;select&gt;` 元素的操作,提供了一系列便捷的方法,使得在JavaScript中处理下拉列表变得更加简单。 1. **获取选中项...

    jQuery模拟select下拉框插件.zip

    "jQuery模拟select下拉框插件"就是这样一个工具,它提供了更丰富的交互性和定制性,相比原生的HTML下拉框控件,能够为用户带来更好的体验。下面将详细探讨这个插件的原理、功能以及如何使用。 首先,原生的`&lt;select...

    jquery select插件带搜索框的下拉选择框代码

    在本文中,我们将深入探讨如何使用jQuery的"searchableSelect"插件来创建一个具有搜索功能的下拉选择框。这个插件对于那些需要在大量选项中快速查找和选择的项目非常有用,它大大提升了用户体验。 首先,让我们了解...

    jquery 封装select实现select自定义样式插件jquery.easydropdown.min.js

    `jquery.easydropdown.min.js`是一个轻量级的jQuery插件,它的主要功能是将传统的Select元素转换为具有自定义样式的下拉菜单。这个插件通过JavaScript和CSS实现了高度可定制的外观和行为,同时保持了原生Select的...

    JQuery插件select2

    - **基本用法**:展示如何初始化一个简单的Select2实例,并解释相关配置选项。 - **自定义模板**:说明如何使用自定义模板来调整选项的显示样式。 - **事件监听**:讲解如何监听和响应Select2的各种事件,如打开、...

    jquery select美化插件

    首先,jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理、动画效果和Ajax交互。在“jquery select美化插件”这个主题中,我们主要关注的是如何利用jQuery扩展原生的`&lt;select&gt;`元素,使其外观和交互更加...

    jQuery.Select.插件

    jQuery.Select是一款专为`&lt;select&gt;`元素设计的插件,它提供了丰富的自定义选项,使得在不同浏览器间保持一致的视觉效果和交互体验变得简单。这款插件特别适用于那些需要在Internet Explorer、Firefox和Chrome等主流...

    jquery.editable-select插件使用案例

    此为jquery.editable-select插件的使用案例,这是一款非常好用的插件,好用之处:既可下拉框选择也可手动输入,而且手动输入还能对下拉框选项进行过滤,而且还可实现一些相关事件,具体请查看官方文档。

    jquery下拉菜单插件SelectMenu

    总的来说,`SelectMenu.js` 是一个强大的 jQuery 下拉菜单插件,它以其简洁、易用和多样化的特性,为网页开发带来了更优的用户体验。无论是在简单的网页还是复杂的 Web 应用中,它都能很好地适应并发挥其作用。

    写了个jquery select 插件

    标题 "写了个jquery select 插件" 暗示了我们正在讨论一个使用jQuery库创建的自定义下拉选择框插件。这个插件可能是为了改进原生HTML `&lt;select&gt;` 元素的功能和外观,提供更丰富的交互和定制化选项。 在描述中提到的...

    jQuery-ComboSelect插件

    首先,jQuery-ComboSelect的核心功能是将传统的单选或单行的下拉列表转换为一个可多选、具有搜索功能的下拉框。用户可以通过输入关键词快速筛选出所需选项,提高了数据查找和选择的效率。这对于那些包含大量选项的...

    jquery select2组件

    `Select2`的初始化方法接受一个配置对象,其中包含各种选项,如: ```javascript $('.select2').select2({ placeholder: '请选择...', // 设置占位符文本 allowClear: true, // 是否允许清除选择 ...

    jquery操作select插件.docx

    在本文中,我们将深入探讨如何使用jQuery来操作`select`插件,包括获取和设置选中项、添加和删除选项以及检查选项是否存在。 1. **获取选中项的文本** 使用`getSelectedText`函数可以获取当前`&lt;select&gt;`元素中选中...

    jQuery下拉查询筛选插件Combo Select

    **jQuery下拉查询筛选插件Combo Select** 在Web开发中,为了提高用户体验,经常会使用到下拉选择框,特别是当选项列表很长时。jQuery库提供了一种强大的方式来增强原生HTML元素的功能,其中就包括了`Combo Select`...

    jQuery下拉查询筛选插件Combo Select.zip

    jQuery下的 Combo Select 插件是一种高效且用户友好的下拉查询筛选工具,广泛应用于网页开发中,特别是需要在大量数据中快速查找和选择项时。这个插件是基于HTML5技术构建的,确保了在现代浏览器中的兼容性和性能。...

    jQuery下拉列表select美化插件jQselectable

    jQuery下拉列表select美化插件jQselectable jQuery下拉列表select美化插件jQselectable jQuery下拉列表select美化插件jQselectable jQuery下拉列表select美化插件jQselectable

Global site tag (gtag.js) - Google Analytics