`

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;
}

 

分享到:
评论

相关推荐

    通过BootStrap-select插件 js jQuery控制select属性变化

    js控制select属性变化其实很简单,并不需要 $('#goodsNames').selectpicker('render'); $('#goodsNames').selectpicker('refresh'); 来重新渲染只用 $(".selectpicker").selectpicker({ width : 300,

    jQuery中的select操作详解

    下面给大介绍了jquery对select的操作介绍,非常不错,具有内容介绍如下所示: select的html标签如下: &lt;select class=xxx id=yyy&gt;&lt;option&gt;&lt;/option&gt;...&lt;option&gt;&lt;/option&gt;&lt;/select&gt; 1.设置value为“lll...

    jQuery下拉框美化插件Select-or-Die.zip

    Select-or-Die 是一款基于 jQuery 的下拉框美化插件,你不用修改你原来的下拉框,它能够完全无缝的对你原来的下拉框进行美化,它甚至还支持添加前缀、HTML data 属性、键盘循环控制、设置高度、跳转到链接以及回调...

    jQuery-jsonCategoryToSelector:将OneThink里的 list_to_tree 无限级分类的json数据转换为select标签

    将从服务端取到的分类数据生成select标签,并控制表单的值 依赖 jquery 1.7+ 使用说明 首先需要一个表单的标签来存放name值 &lt;input type="text" name="cat_id" value="" /&gt; 初始化代码 $('input[name=cat_id]')...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    1.jquery+css美化select下拉菜单插件(Stylish Select v0.3)下载 2.jQuery+CSS实现多项选择文本框的插件下载 3.jQuery表单验证插件EasyValidator 2.0带TIP提示效果 4.jQuery导航插件下载之支持三级的Menu暖色...

    jQuery详细教程

    jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。 选择器允许您对 HTML 元素组或单个元素进行操作。 在 HTML DOM 术语中: 选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。...

    jquery-1.1.3 效率提高800%

    台北") $("div#台北") $("foo_bar台北") $("div[@id=台北]")Escape Selectors: A frequently requested feature you can now select elements by ID (or other selector) that uses a special character, ...

    jQuery下拉列表插件EasyDropDown.zip

    EasyDropDown 是一款能让用户简单实现把 &lt;select&gt; 元素变成 styleable 下拉菜单列表或者是 UI/导航 。 功能: 兼容表格和验证 全键盘控制文本搜索 支持内部滚动长列表 在触摸设备上降级本地 UI 完全支持 IE8 ...

    jQuery完全实例.rar

    当你创建单个元素时,请使用闭合标签或 XHTML 格式。例如,创建一个 span ,可以用 $("&lt;span/&gt;") 或 $("&lt;span&gt;&lt;/span&gt;") ,但不推荐 $("&lt;span&gt;") --------------------------------------------------------------...

    ledicator:jQuery 插件来显示一个作为具有不同颜色状态的单个 LED 指示灯进行控制

    发光二极管jQuery 插件将&lt;select&gt;控件显示为具有不同颜色状态的单个 LED 指示器。 LEDicators 可能看起来像 指示... 创建一个具有定义数量的标签。 给你的&lt;select&gt;元素一个 id。 然后,包含一个带有以下行

    SelectPage v2.19

    SelectPage是一个基于jQuery及使用Bootstrap环境开发的,下拉列表带输入快速查找及结果分页展示的多功能选择器。SelectPage功能特点基于jQuery、Bootstrap2、3开发 也可应用于无任何UI框架的原生HTML环境 输入框...

    Spring_MVC_051:Spring MVC 学习总结(五)——校验与文件上传

    Spring MVC 学习总结(五)——校验与文件上传 ...3.6、jQuery扩展插件validate—6radio、checkbox、select的验证 四、文件上传 4.1、Servlet3.0以下的通过commons-fileupload上传 4.1.1、添加上传依赖包 4.1.2

    JS控制显示隐藏兼容问题(IE6、IE7、IE8)

    在IE7中, 使用jQuery 显示:$(“#a... IE6,最怪异,使用display:none不能隐藏select标签 下面这两个,经测试,在三个版本中都能正常使用 隐藏:document.getElementById(“a”).style.display=”none”; 显示:docume

    python入门到高级全栈工程师培训 第3期 附课件代码

    08 form表单之select标签 09 table标签 第38章 01 css的四种引入方式 02 css的四种基本选择器 03 css的组合选择器 04 css的属性选择器 05 css的伪类 06 css的选择器优先级 07 css的背景属性 第39章 01 css的文本...

    PHP轻量级框架DQFramework.zip

    控制器继承类M继承数据模型 Select select($table, $columns, $where) table [string] 表的名称. columns [string/array] 返回的字段列. where (optional) [array] WHERE 条件语句. 返回值: [array] 查询到的数组 ...

    精通AngularJS part1

    jQuery与AngularJS39 苹果与橙子40 窥视未来41 14总结41 第2章构建与测试43 21介绍示例应用44 熟悉问题领域44 技术栈45 持久化存储46 MongoLab46 服务器端环境47 第三方JavaScript库48 BootstrapCSS48 ...

    大名鼎鼎SWFUpload- Flash+JS 上传

     SWFUpload是一个客户端文件上传工具,最初由Vinterwebb.se开发,它通过整合Flash与JavaScript技术为WEB开发者提供了一个具有丰富功能继而超越传统标签的文件上传模式。 [编辑本段]SWFUpload的主要特点  * 可以...

    单点登录源码

    本系统是基于RBAC授权和基于用户授权的细粒度权限控制通用平台,并提供单点登录、会话管理和日志管理。接入的系统可自由定义组织、角色、权限、资源等。用户权限=所拥有角色权限合集+用户加权限-用户减权限,优先级...

    xheditor-1.1.14

    方法2:利用xhEditor提供的jQuery插件接口来实现对特定textarea的初始化和传递参数,例: $('#elm1').xheditor(); 或者 $('#elm1').xheditor({tools:'mini'}); 特别说明:两种初始化方法只能选择其中一种使用,如果...

Global site tag (gtag.js) - Google Analytics