`

jquery.select.js

阅读更多

Jquery其实本身可以操作select表单,但是由于比较反锁,没有.net 控件那样去操作方便,我在网上Google了一会,发现了一个不错的专门操作select的插件,很好,使用过了,感觉蛮不错的,所以收藏了起来

这里是js的代码:

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

然后再引入这个js文件,然后你就可以使用这些方法了


分享到:
评论

相关推荐

    jquery.selectbox.js select下拉菜单美化代码

    jquery.selectbox.js select下拉菜单美化代码 jquery.selectbox.js select下拉菜单美化代码 jquery.selectbox.js select下拉菜单美化代码

    jquery.selectlist.js插件实现的下拉框美化特效

    `jquery.selectlist.js`插件是基于JavaScript库jQuery构建的,jQuery是一个轻量级的、高性能的库,使得开发者能够更容易地进行DOM操作、事件处理、动画效果以及Ajax交互。通过利用jQuery的强大功能,`jquery.select...

    jquery.editable-select

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

    jquery.selectlist.js

    `jquery.selectlist.js`是一个专门用于优化Select下拉框的JavaScript插件,它主要目标是提高用户体验,尤其是在老旧的IE6及以上的浏览器中。在前端技术日新月异的今天,虽然许多现代浏览器已经提供了丰富的原生功能...

    下拉框插件jquery.select.js

    《jQuery自定义select下拉框样式插件jquery.select.js详解》 在网页设计中,下拉框(Select)是常用的一种交互元素,用于提供多个选项供用户选择。然而,原生的HTML `&lt;select&gt;` 元素样式单一,无法满足设计师们对于...

    jquery.selectlist.js下拉框美化插件

    `jQuery.selectlist.js`是一款专门针对HTML Select元素进行美化处理的JavaScript插件。它不仅提供了丰富的自定义选项,还能与现有的jQuery代码无缝集成,使得开发者能够轻松地将普通的下拉框转换为具有视觉吸引力的...

    jQuery.Select.插件

    为了解决这个问题,开发者们通常会借助于JavaScript库,如jQuery,来增强`&lt;select&gt;`的功能和外观。本文将详细介绍jQuery的Select插件,该插件能够帮助我们创建具有高级特性和良好兼容性的下拉选择框。 **1. jQuery ...

    jquery.cityselect.js

    jquery三级联动省市地区插件CitySelect,怎么资源分越来越贵了

    jquery.selectlist.js插件实现的下拉框美化特效.zip

    《jQuery.selectlist.js插件实现的下拉框美化特效详解》 在网页设计中,下拉框(Select List)作为常见的交互元素,其外观和用户体验往往直接影响到网站的整体质感。然而,HTML原生的下拉框样式较为单一,难以满足...

    前端项目-jquery.selectbox.zip

    - `jquery.selectBox.js`: 插件的主要JavaScript文件,包含了所有核心功能。 - `jquery.selectBox.css`: 默认的CSS样式文件,定义了基本的外观。 - `demo`目录:可能包含一个演示页面,展示了插件的用法和效果。 - `...

    JQuery版的select下拉效果

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

    chosen.jquery.js

    chosen_v1.2.0.zip chosen.jquery.js jQuery Chosen Plugin 是一个 jQuery 插件,用来将网页中的下拉框进行功能扩展和美化。可实现对下拉框的搜索,多个标签编辑等功能 下载地址:...

    jquery.cxselect.min.zip

    Bootstrap以其响应式布局和丰富的UI组件而闻名,而jQuery则是一个强大的JavaScript库,简化了DOM操作、事件处理和动画效果。在这个场景中,我们讨论的是如何利用jQuery和Bootstrap来实现一个多级下拉框联动的功能。 ...

    jquery.editable-select.min的css与js

    jQuery Editable Select 是一个轻量级的插件,由两部分组成:`jquery.editable-select.min.css` 和 `jquery.editable-select.min.js`。这两个文件分别是CSS样式表和JavaScript脚本,它们共同实现了这个强大的功能...

    jQuery.Select

    "index.html"是示例页面,"jquery132.js"可能是基础的jQuery库,"jquery.select-1.3.4.js"和".min.js"版本是未压缩和压缩后的jQuery.Select插件,而"jquery.select-1.3.4-pack.js"可能是经过进一步优化的版本,用于...

    jquery.autocomplete.js使用示例,可直接运行

    **jQuery Autocomplete.js 插件使用详解** jQuery Autocomplete.js 是一个非常实用的插件,它为HTML输入框提供了自动补全功能,极大地提升了用户体验。这个插件基于jQuery库,结合Ajax技术,能够实时从服务器获取...

    JQuery SELECT单选模拟jQuery.select.js

    jQuery Select单选模拟插件是一个基于jQuery JavaScript库的插件,主要用于在网页上模拟原生HTML SELECT单选元素的行为和样式。这种插件特别有用,当开发者希望拥有更多自定义下拉框的外观和功能,而不满足于浏览器...

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

    《jQuery封装Select实现自定义样式插件:jquery.easydropdown.min.js》 在Web开发中,Select元素是常用的数据选择控件,但其默认样式通常较为单一,无法满足设计师们对界面美观度的需求。jQuery库为我们提供了丰富...

    jquery.jSelectDate.js 下拉列表式日期选择插件实例.rar

    jquery.jSelectDate.js 下拉列表式日期选择器插件实例,裸体版基本没有美化,其实这样更方便使用者自己美化,有些人可能会比较喜欢这种select列表式的日期选择功能,和个人习惯有关。功能介绍:1.支持闰年、大小月和...

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

    2. `jquery.searchableSelect.js`:这是插件的JavaScript文件,包含了实现搜索功能的代码。 3. `jquery.searchableSelect.css`:这是一个CSS文件,用于定义插件的样式,确保其在页面上正确显示。 接下来,让我们看...

Global site tag (gtag.js) - Google Analytics