jquery下拉框插件

2013-01-23

下拉框操作有时候非常费事,所以写一个jquery下拉框插件,以后长期维护自己用了。

/*
* jcombobox 1.0
*
* Copyright (c) 2013 yepeng
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
*/
(function ($) {
    jQuery.fn.extend({
        //得到select项的个数   
        getSize: function () {
            if (jQuery(this).get(0).options) {
                return jQuery(this).get(0).options.length;
            }
            return 0;
        },
        //获得选中项的索引   
        getSelectedIndex: function () {
            return jQuery(this).get(0).selectedIndex;
        },
        //获得当前选中项的文本   
        getSelectedText: function () {
            if (this.getSize() == 0) return "下拉框中无选项";
            else {
                var index = this.getSelectedIndex();
                return jQuery(this).get(0).options[index].text;
            }
        },
        //获得当前选中项的值   
        getSelectedValue: function () {
            if (this.getSize() == 0)
                return "下拉框中无选中值";

            else
                return jQuery(this).val();
        },

        //设置select中值为value的项为选中   
        setSelectedValue: function (value) {
            jQuery(this).get(0).value = value;
        },

        //设置select中文本为text的第一项被选中   
        setSelectedText: function (text) {
            var isExist = false;
            var count = this.getSize();
            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("下拉框中不存在该项");
            }
        },
        //设置选中指定索引项   
        setSelectedIndex: function (index) {
            var count = this.getSize();
            if (index >= count || index < 0) {
                alert("选中项索引超出范围");
            }
            else {
                jQuery(this).get(0).selectedIndex = index;
            }
        },
        //判断select项中是否存在值为value的项   
        isExistItem: function (value) {
            var isExist = false;
            var count = this.getSize();
            for (var i = 0; i < count; i++) {
                if (jQuery(this).get(0).options[i].value == value) {
                    isExist = true;
                    break;
                }
            }
            return isExist;
        },
        //向select中添加一项,显示内容为text,值为value,如果该项值已存在,则提示   
        addOption: function (text, value) {
            if (this.isExistItem(value)) {
                alert("待添加项的值已存在");
            }
            else {
                jQuery(this).get(0).options.add(new Option(text, value));
            }
        },
        //初始化select 
        initOption: function (url, textField, valueField) {
            var obj = jQuery(this);
            this.clearAll();
            jQuery.ajax({
                url: url,
                cache: false,
                dataType: "json",
                success: function (data) {
                    $.each(data, function (i, n) {
                        obj.addOption(n[textField], n[valueField]);
                    });
                }
            });
        },
        //删除select中值为value的项,如果该项不存在,则提示   
        removeItem: function (value) {
            if (this.isExistItem(value)) {
                var count = this.getSize();
                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中指定索引的项   
        removeIndex: function (index) {
            var count = this.getSize();
            if (index >= count || index < 0) {
                alert("待删除项索引超出范围");
            }
            else {
                jQuery(this).get(0).remove(index);
            }
        },
        //删除select中选定的项   
        removeSelected: function () {
            var index = this.getSelectedIndex();
            this.removeIndex(index);
        },
        //清除select中的所有项   
        clearAll: function () {
            jQuery(this).get(0).options.length = 0;
        }
    });
})(jQuery);

有需要的复制粘贴过去

使用 例子: $("下拉框id").getSize(); //获取数量

作者:robotbird, 分类:关于代码 标签: javascript jquery , 浏览(2853), 评论(0)
上一篇: github被封解决办法
下一篇: 竟然一年多都没写博客了

相关文章

(0)条评论 订阅

发表评论

电子邮件用于回复通知和avatar全球唯一头像 *

*