`

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获取Select标签的值

    除了获取 Select 标签的值之外,还可以通过 jQuery 来控制其他表单元素的行为,包括文本框、复选框、单选按钮等。 ##### 1. 文本框与文本区域 - **清空内容**:`$("#txt").val("");` - **填充内容**:`$("#txt")....

    jQuery获取Select标签的手册

    1. **获取Select标签的value值**: 要获取`Select`标签中当前选中的选项的`value`属性值,可以使用`$('select').val()`。例如: ```javascript var selectedValue = $('select').val(); ``` 这将返回`&lt;select&gt;`...

    jQuery模拟select效果

    `&lt;select&gt;`标签用于创建一个下拉选项列表,用户可以选择其中的一个或多个选项。`&lt;option&gt;`标签则用于定义下拉列表中的每个选项。在HTML中,这些元素可以这样编写: ```html &lt;select id="customSelect"&gt; ...

    jQuery模拟Select下拉菜单选中添加代码.zip

    然而,原生的HTML Select标签有时不能满足设计师和开发者对于界面美观性和交互性的需求。此时,jQuery的威力就显现出来了。本压缩包提供了一种使用jQuery模拟Select下拉菜单的方法,它不仅可以实现基本的下拉功能,...

    JQuery版的select下拉效果

    要实现“JQuery版的select下拉效果”,首先需要在页面中引入JQuery库和`jquery.select.js`插件。通常,这可以通过在HTML文件的`&lt;head&gt;`标签内添加`&lt;script&gt;`标签来完成。同时,可能还需要引入相关的CSS文件,以定义...

    jquery模拟select效果实现

    总的来说,jQuery模拟select效果提供了一种灵活的方式来定制下拉菜单,使得我们可以更自由地控制其外观和交互。通过深入理解HTML、CSS和jQuery,你可以构建出更复杂、更符合用户体验的模拟select组件。

    jquery.editable-select

    6. **压缩和非压缩版本**:提供的 `jquery.editable-select.js` 和 `jquery.editable-select.min.js` 分别是未压缩和压缩后的版本。在开发阶段,可以使用未压缩版方便调试,而在生产环境中,压缩版可以减少文件大小...

    jquery select美化插件

    然而,原生的HTML `&lt;select&gt;` 标签在样式控制和用户体验方面存在局限,不能满足现代网页设计的需求。这就催生了jQuery Select美化插件的出现。本篇文章将深入探讨jQuery Select美化插件的相关知识点,以及如何使用...

    jquery模拟select,带tip提示

    本文将详细讲解如何使用jQuery模拟Select下拉框,并结合Tip提示功能,提升用户体验。这个实例中,开发者创建了一个自定义的jQuery插件,用于替代原生的HTML `&lt;select&gt;` 元素,同时集成了qTip插件,为模拟的Select...

    JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参

    在本节内容中,我们将详细介绍如何使用JQuery来绑定一个下拉列表(select标签)的onchange事件。当用户从下拉列表中选择一个选项时,会触发此事件,从而弹出所选的值,并且页面会根据指定的参数进行跳转。在这个过程...

    jquery自定义select下拉样式.zip

    为了自定义下拉样式,我们通常会隐藏原生的`&lt;select&gt;`元素,然后创建一个自定义的UI元素(如一个包含按钮和下拉列表的div),通过jQuery控制其显示和隐藏。CSS用于设置这些元素的样式,例如: ```css .custom-...

    移动设备 select jquery插件

    在移动设备上,传统的HTML `&lt;select&gt;` 元素在用户交互和样式控制方面存在局限性,尤其是在触摸屏设备上。为了改善这一体验,开发者通常会使用像jQuery这样的JavaScript库来创建自定义的下拉选择器插件。"移动设备 ...

    jQuery实现select样式美化代码

    最后,我们可以使用jQuery监听select的`focus`和`blur`事件,以及`change`事件来控制下拉图标的显示和隐藏: ```javascript $(document).ready(function() { $('.custom-select').on('focus', function() { $...

    jQuery对Select的操作大集合(收藏)

    总的来说,jQuery对Select的控制非常灵活,无论是添加、删除Option,还是获取和设置选中状态,都提供了简洁且强大的API。这对于前端开发者来说,大大提高了编写交互式网页的效率。掌握这些技巧,可以让你在开发过程...

    jQuery自定义select下拉菜单

    1. **基础HTML结构**:创建一个包含`&lt;option&gt;`元素的`&lt;select&gt;`标签。每个`&lt;option&gt;`代表一个可选项目。例如: ```html &lt;select id="customSelect"&gt; 选项1 选项2 选项3 &lt;/select&gt; ``` 2. **隐藏原生select**...

    定制html的select标签样式

    `jquery.select.widget-1.0.js`是专门用来实现自定义下拉选择框功能的插件,它会监听`&lt;select&gt;`元素,并将其转换为一个更易于控制的组件。在实际应用中,我们需要先引入jQuery库,再引入这个插件,确保其正常工作。...

    jQuery实现select下拉框菜单选中插件.zip

    综上所述,这个“jQuery实现select下拉框菜单选中插件”提供了对HTML下拉菜单的增强功能,允许开发者轻松地控制选中项,并可以与其他jQuery功能结合使用,以构建更复杂的交互式表单和用户界面。通过这个插件,我们...

    jquery带有图片的select插件

    3. **初始化插件**:找到需要增强的`&lt;select&gt;`元素,并使用jQuery选择器选中,然后调用插件提供的初始化方法。 4. **配置选项**:根据需求设置插件的配置项,例如显示模式、图片大小等。 5. **添加图片和数据**:为...

    jquery select美化插件selectlist plugin下载地址.zip

    将其放置在合适的位置,并在HTML文档中通过`&lt;link&gt;`和`&lt;script&gt;`标签引入,确保jQuery库在SelectList Plugin之前加载。例如: ```html &lt;link rel="stylesheet" href="path/to/selectlist.css"&gt; ...

Global site tag (gtag.js) - Google Analytics