其实，之前也写过jQuery插件，今天写的是一个模拟select选择的下拉插件。
既然是jQuery插件，那么必然是依赖jQuery的了。
老规矩，直接上代码吧！
;(function () {
$.fn.extend({
dropdown:function (options) {
return this.each(function (i, val) {
$(val).css("position", "relative");
var oThis = $(this);
// 设置默认参数
var opts = $.extend({
color: "#0a96d4",
items: [
{key1: "选项一"},
{key2: "选项二"},
{key3: "选项三"},
{key4: "选项四"},
{key5: "选项五"}
],
initialVal: "请选择",
callback: function () {
}
}, options);
// 创建默认选择--请选择
var $defaultVal = $("<p class='item'></p>").html(opts.initialVal).appendTo($(this));
oThis.data("val", opts.initialVal);
// 创建选择项
var $items = $("<ul class='menu-options'></ul>");
$(this).append($items);
// 为每一个选择项添加属性 如果是对象类型，则添加key作为属性，如果就是字符串的话，直接既当做属性，也当做内容添加
$.each(opts.items, function (index, item) {
if (typeof item == "string" || typeof item == "number") {
var oLi = $("<li></li>").html(item).attr("data-val", item).appendTo($items);
if (opts.initialVal == item) oLi.addClass("active");
} else if (typeof item == "object") {
for (var key in item) {
var oLi = $("<li></li>").html(item[key]).attr("data-val", key).appendTo($items);
if (opts.initialVal == item[key]) oLi.addClass("active");
}
}
});
$defaultVal.on("click", function (ev) {
ev.stopPropagation();
$(".open").not(this).trigger("click");
$(this).toggleClass("open");
$(this).hasClass("open") ? $(this).next().slideDown() : $(this).next().slideUp()
});
// 选择项的点击事件
$items.on("click", "li", function (ev) {
ev.stopPropagation();
var $this = $(this);
$(this).addClass("active").css("backgroundColor", opts.color).siblings().removeClass("active").css("backgroundColor", $this.parent().css("backgroundColor"));
opts.callback();
$this.parent().slideUp(function () {
$this.parent().prev("p").html($this.html()).add(oThis).attr("data-val", $this.attr("data-val")).removeClass("open");
});
});
// 点击空白部分，关闭下拉选择框
$(window).on("click", function () {
if ($defaultVal.hasClass("open")) {
$defaultVal.trigger("click");
}
})
});
}
})
})(jQuery);
页面上比较干净：
<div class="dropdown"></div>
js部分属于直接调用dropload方法即可：
$(".dropdown").dropdown({
color: "#f0f",
items: [
{"shucai": "青菜"},
{"shuiguo": "葡萄"},
{"food": "面包"}
],
callback: function () {
console.log($(this))
}.bind($(".dropdown"))
});
items数组内容也可以直接是多个字符串，如： ["苹果", "水蜜桃", "哈密瓜"]
