自定义下拉菜单插件

//下拉菜单插件
jQuery.fn.DropDownList = function (parameters) {
    var defaults = {
        value: [{ text: "全部", value: "0" }],
        defaultText: "全部",
        defaultValue: "0",
        string: false,
        callback: function () { return false; }
    };
    defaults = jQuery.extend(defaults, parameters);
    return this.each(function () {
        var values = defaults.value;
        var isString = defaults.string;
        var text = defaults.defaultText;
        var value = defaults.defaultValue;
        var $ul = $("<ol style='display: none;'/>");
        if (isString) {
            values.forEach(function (n,i) {
                var $li = $("<li value='" + n + "'/>").text(n);
                $ul.append($li);
            });
        } else {
            $.each(values, function (i, n) {
                var $li = $("<li value='" + n.value + "'/>").text(n.text);
                $ul.append($li);
            });
            //values.forEach(function (n,i) {

            //});
        }
        $(this).append($ul);
        $(this).find('input').val(text);
        $(this).find('input').attr({ "selectValue": value });
        $ul.find("li").unbind('click').bind('click', function () {
            $(this).parent().parent().find('input').val($(this).text());
            $(this).parent().parent().find('input').attr({ "selectValue": $(this).val() });
            defaults.callback();
        });
        //$(this).unbind('click').bind('click', function () {
        //    //$(this).children('ol').show();
        //    //alert("show1");
        //   //$(this).children('ol').toggle();
        //});
        var $div = $(this);
        $(document).mouseup(function (event) {
            if ($(event.target).is($div.children()) || $(event.target).is($div)) {
                if ($ul.css('display') == 'block') {
                    $ul.hide();
                } else {
                    $ul.show();
                }
            } else {
                if ($ul.css('display') == 'block') {
                    $ul.hide();
                }
            }
        });
    });
}

 调用函数：

$('#divCouponType').DropDownList({
            value: [
                { text: "全部", value: "0" },
                { text: "满减券", value: "1" },
                { text: "换购券", value: "2" },
                { text: "满送券", value: "3" },
                { text: "折扣券", value: "4" },
                { text: "代金券", value: "5" },
                { text: "体验券", value: "6" },
                { text: "套餐券", value: "7" }
            ],
            defaultText: "全部",
            defaultValue: "0",
            string: false
        });