先上图吧,看看效果。
JS代码：
; (function ($) {
var DropdownList = function (oDataSouce, oControlsContainer, oListContainer) {
this._DataSouce = typeof (oDataSouce) == "object" ? oDataSouce : $.parseJSON(oDataSouce);
this._parentElement = oControlsContainer;//容器控件对象
this._oSelectInputDiv;//选择后显示内容控件
this._ListContainer = oListContainer;//下拉列表控件对象
this._ListContainerClick = false;//判断列表是否被点击过
this._ListPostionLeft;//列表左边的距离
this._ListPostionTop;//列表上边的距离
this._IsInited = false;//是否已经初始化数据
this._MouseoutElement = false;//判断鼠标是否离开某个元素
this._RemberMouseClickNum = 1;////记录鼠标点击下拉时的次数；
this._ArrayCollection = new Array;//多选后用于存放结果;
this.AllowShowCheckBox = false;//是否允许多选
this.ControlsContainerWidth = 200;//默认控件宽度为200像素
};
DropdownList.prototype = {
InitControl: function () {
var _oSelf = this;
var _oSelectBorderDiv = $("<div>", { "class": "selectBorder", style: "width:" + _oSelf.ControlsContainerWidth + "px;" }).appendTo(this._parentElement);
_oSelectBorderDiv.mouseover(function () { $(this).css({ border: "1px solid blue" }) }).mouseout(function () { $(this).css({ border: "1px solid black" }) });
_oSelf._oSelectInputDiv = $("<div>", { "class": "selectInput", style: "width:" + (_oSelf.ControlsContainerWidth - 10) + "px;" }).appendTo($(_oSelectBorderDiv));
var _oSelectImgDiv = $("<div>", { "class": "selectImg" }).appendTo($(_oSelectBorderDiv));
var _oSelectImg = $("<img>", {
src: "images/arrow.gif", style: "cursor:pointer",
click: function () {
var _oShowList = { width: _oSelectBorderDiv.width(), border: " 1px solid gray", display: "" };
if (!_oSelf._IsInited) {
_oSelf._InitData();
_oSelf._ListPostionLeft = _oSelectBorderDiv.position().left;
_oSelf._ListPostionTop = _oSelectBorderDiv.position().top + _oSelectBorderDiv.height() + 10;
_oSelf._ListContainer.css(_oShowList);
_oSelf._ListContainer.offset({ top: _oSelf._ListPostionTop, left: _oSelf._ListPostionLeft });
_oSelf._IsInited = true;
_oSelf._RemberMouseClickNum += 1;
} else {
if (_oSelf._RemberMouseClickNum % 2 == 0) {
_oSelf._MouseoutElement = true;
_oSelf._RemberMouseClickNum = 1;
} if (_oSelf._ListContainerClick) {
_oSelf._RemberMouseClickNum += 1;
_oSelf._MouseoutElement = false;
_oSelf._BindDocumentEvent();
_oSelf._ListContainer.css(_oShowList);
_oSelf._ListContainerClick = false;
}
else {
_oSelf._RemberMouseClickNum += 1;
_oSelf._BindDocumentEvent();
_oSelf._ListContainer.css(_oShowList);
}
} _oSelf._SetListboxSelectedStatus(_oSelf.AllowShowCheckBox);
}, mouseout: function () {
_oSelf._MouseoutElement = true;
_oSelf._RemberMouseClickNum += 1;
}
}).appendTo(_oSelectImgDiv);
},
_InitData: function () {
var _oSelf = this;
var _oSelectCollection;
for (var i = 0, _iDataCpount = _oSelf._DataSouce.length; i < _iDataCpount; i++) {
var _oDiv = $("<div>", {
"class": "lists", id: "div_" + i, selected: "false", selectedIndex: "" + i + "", title: "" + this._DataSouce[i].text + "", click: function () {
if (_oSelf.AllowShowCheckBox) {
_oSelf._BindListboxChecboxClickEvent(this);
} else { _oSelf._GetListboxText(this); }
}, mouseout: function () { _oSelf._MouseoutElement = true; }
}).mouseover(function () {
_oSelf._BindMouseoverEvent($(this));
_oSelf._BindDocumentEvent();
}).mouseout(function () {
_oSelf._BindMouseoutEvent($(this));
});
this._ListContainer.append(_oDiv);
if (_oSelf.AllowShowCheckBox) {
_oDiv.append($("<input>", {
type: "checkbox", id: "checkbox_" + i, "for": "label_" + i, click: function (oCheck) {
var _sID = oCheck.srcElement.id || oCheck.tagName.id;
var _oParentDiv = $("#" + _sID).parent();
_oSelf._BindListboxChecboxClickEvent(_oParentDiv);
}
}));
} _oDiv.append($("<label>", { id: "label_" + i, key: "" + this._DataSouce[i].value + "" }).html(this._DataSouce[i].text));
} if (_oSelf.AllowShowCheckBox) {
_oSelf._CreateListboxFoot();
}
},
_BindMouseoverEvent: function (oDiv) {
oDiv.mouseover(function () {
if ($(this).attr("selected") != "selected") {
$(this).css({ backgroundColor: "#3A8FCF" })
}
});
},
_BindMouseoutEvent: function (oDiv) {
oDiv.mouseout(function () {
if ($(this).attr("selected") != "selected") {
$(this).css({ backgroundColor: "#fff" })
}
});
},
_BindCheckboxClickEvent: function (oCheckBox, oDiv) {
_oSelf = this; if (!oCheckBox[0].checked) {
oCheckBox[0].checked = true; oDiv.css({ backgroundColor: "#3A8FCF" }).unbind("mouseover").unbind("mouseout");
} else {
oCheckBox[0].checked = false;
oDiv.css({ backgroundColor: "#fff" }).bind("mouseover", _oSelf._BindMouseoverEvent(oDiv)).bind("mouseout", _oSelf._BindMouseoutEvent(oDiv));
}
},
_BindListboxChecboxClickEvent: function (oDiv) {
var _oSelf = this;
var _oParentContainer = $(oDiv);
var _oCheckBoxElement = _oParentContainer.children().first();
var _oLabelElement = _oParentContainer.find("label");
_oSelf._BindCheckboxClickEvent(_oCheckBoxElement, $(oDiv));
_oSelf._MouseoutElement = false;
_oSelectCollection = { key: _oLabelElement.attr("key"), value: _oLabelElement.html(), selectedIndex: $(oDiv).attr("selectedIndex") };
_oSelf._ArrayCollection.push(_oSelectCollection);
},
_BindDocumentEvent: function () {
var _oSelf = this;
$(document).click(function () {
if (_oSelf._MouseoutElement) {
_oSelf._ListContainer.css({ display: "none" });
_oSelf._MouseoutElement = false;
_oSelf._RemberMouseClickNum = 1;
if (_oSelf.AllowShowCheckBox) {
if (_oSelf._oSelectInputDiv.html() == "") {
_oSelf._SetCheckboxSelectedStatus(false, "#fff");
_oSelf._ArrayCollection = new Array;
}
}
}
});
},
_GetListboxText: function (oDiv) {
var _oSelf = this;
var _oLabelElement = $(oDiv).find("label");
var _sSelectedText = _oLabelElement.html();
var _sSelectedValue = _oLabelElement.attr("key");
var _oDisplayText = _oSelf._oSelectInputDiv;
var _iSelectedIndex = $(oDiv).attr("selectedIndex");
_oDisplayText.html(_sSelectedText);
_oDisplayText.attr({ "key": _sSelectedValue, "selected": true, "selectedIndex": _iSelectedIndex, title: "" + _sSelectedText + "" });
_oSelf._SetListboxDisplayStatus();
},
_SetListboxDisplayStatus: function () {
var _oSelf = this;
_oSelf._ListContainer.css({ display: "none" });
_oSelf._ListContainerClick = true;
_oSelf._MouseoutElement = false;
},
_SetListboxSelectedStatus: function (bAllowShowCheckBox) {
var _oSelf = this;
if (bAllowShowCheckBox) {
if (_oSelf._ArrayCollection.length > 0) {
_oSelf._SetCheckboxSelectedStatus(true, "#3A8FCF")
}
} else {
var _sCurrentSelectedText = _oSelf._oSelectInputDiv.attr("selectedIndex");
for (var libIndex = 0, libLen = _oSelf._ListContainer.children().length; libIndex < libLen; libIndex++) {
var _oDiv = _oSelf._ListContainer.children().eq(libIndex);
if (_oDiv.attr("selectedIndex") == _sCurrentSelectedText) {
_oDiv.attr("selected", true).css({ background: "#3A8FCF" });
} else { _oDiv.attr("selected", false).css({ background: "#fff" }); }
}
}
},
_SetCheckboxSelectedStatus: function (bChecked, sColor) {
var _oSelf = this;
for (var _iAcIndex = 0, _iAcLen = _oSelf._ArrayCollection.length; _iAcIndex < _iAcLen; _iAcIndex++) {
var _oDiv = _oSelf._ListContainer.children().eq(_oSelf._ArrayCollection[_iAcIndex].selectedIndex);
_oDiv.find("input[type=checkbox]")[0].checked = bChecked;
_oDiv.css({ background: sColor });
}
},
_CreateListboxFoot: function () {
var _oSelf = this;
$("<div>", { "class": "foot", selectedIndex: "9999" }).append(
$("<img>", {
src: "images/ok.gif", click: function () {
var _sRsult = "";
for (var _iAcIndex = 0, _iAcLen = _oSelf._ArrayCollection.length; _iAcIndex < _iAcLen; _iAcIndex++) {
if (_iAcIndex == 0) {
_sRsult += _oSelf._ArrayCollection[_iAcIndex].value + ";";
}
if (_iAcIndex == _iAcLen - 1) {
_sRsult += _oSelf._ArrayCollection[_iAcIndex].value;
}
}
_oSelf._oSelectInputDiv.html(_sRsult);
_oSelf._MouseoutElement = false;
_oSelf._ListContainer.css({ display: "none" });
}
})).append($("<img>", {
src: "images/cancle.gif", click: function () {
_oSelf._SetCheckboxSelectedStatus(false, "#fff");
_oSelf._ArrayCollection = new Array();
_oSelf._MouseoutElement = true;
_oSelf._BindDocumentEvent();
_oSelf._oSelectInputDiv.html("");
}
})).appendTo(_oSelf._ListContainer);
},
};
$.extend(true, window, {
Controls: { DropdownList: DropdownList }
})
}(jQuery));
下面是HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="css/JsDropdownList.css" rel="stylesheet" />
<script src="Js/jquery-1.8.3.min.js"></script>
<script src="Js/JsDropdownList.js"></script>
<script type="text/javascript">
$(function () {
var _oDropdownList = new Controls.DropdownList([{ "value": , "text": "测试测试测试测试测试测试1" }, { "value": , "text": "测试测试测试测试测试测试2" }, { "value": , "text": "测试3" }, { "value": , "text": "测试4" }], $("#div_Container"), $("#div_list"));
_oDropdownList.AllowShowCheckBox = true;
_oDropdownList.InitControl();
});
</script>
</head>
<body>
<table>
<tr>
<td>选择：</td>
<td>
<div id="div_Container">
</div>
</td>
</tr>
<tr>
<td>选择：</td>
<td>
<div id="div1" style="float: left;">
<input id="Text2" type="text" />
</div>
</td>
</tr>
<tr>
<td>选择：</td>
<td>
<div id="div2" style="float: left;">
<input id="Text1" type="text" />
</div>
</td>
</tr>
</table>
<div id="div_list" style="display: none; overflow: hidden; padding: 0px; margin: 0px;">
</div>
</body>
</html>
还是那句话，表喷啊。 希望各位给点宝贵的意见， 第一次弄这个东西，还不太会。 见谅！！
后续打算写一个grid表格控件，并结合这个下拉框控件和后台处理程序。grid还在构思中。不知道咋个插入代码下载连接，需要代码的童靴可以留个邮箱吧， 或者直接拷贝上面的代码。