自定义下拉菜单插件
//下拉菜单插件
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
});