基于jquery扩展漂亮的下拉框可以二次修改

继续发一篇关于web前端自定义控件——ComboBox（下拉框）,以往我在使用下拉框控件老是为了样式丑陋而烦恼，现在分享这个控件，希望有用的同仁们可以收藏，或进行二次修改，达到你想要的效果。

分解自定义下拉框：

1.创建构造函数，初始化赋值控件值。

2.绑定控件呈现在前台。

3.点击下拉框控件，展示下拉列表

4.点击触发下拉框控件，收起下拉列表。

5.点击下拉项触发事件。

代码如下：

Html代码：
复制代码代码如下:


css样式：
复制代码代码如下:
.dropdown span a{float:left;background:url（/img/Icon_BG.png）;}
/*下拉框 http://power.76741.com*/
.dropdown span a{background-position: -213px -75px;}
.dropdown{float:left;width:105px;}
.dropdown span{border:solid 1px #ccc;width:95%;height:28px;background:url（/img/tbline_bg.png）;border-radius:8px;overflow:hidden;}
.dropdown span{float:left;padding-left:10px;line-height:28px; cursor:pointer;}
.dropdown span.active{border-radius:8px 8px 0px 0px;}
.dropdown span font{width:auto;margin-right: 0px;float:left;}
.dropdown span a{float:right;width:20px;height:20px;margin:4px 0;}
.dropdown p{border:solid 1px #ccc;border-top:0px;width:103px;display:none;position:absolute;margin-top:28px;background-color:#fff;z-index:3;max-height:280px;overflow-y: auto; overflow-x: hidden;}
.dropdown p a{float:left;line-height:28px;height:28px;padding-left:10px;color:#666;font-size:14px;cursor:default;text-align:left;width:100%;overflow:hidden;}
.dropdown p a:hover{background:url（/img/tbline_bg.png）;color:#666;}

Js代码：

1、自定义类：
复制代码代码如下:
//下拉框
var ComboBox = function （） {
this.tag;
this.data_default;
this.data_list;
this.index = 0;

var _this = this;
var _index, _tag, _value;
//初始化
this.init = function （） {
_tag = _this.tag;
_index = _this.index;
//设置对象
_this.setDropdown（_this.data_default, _this.data_list）;
//赋值绑定事件
if （_tag.find（"span font"）.length > 0） _value = _tag.find（"span font"）.attr（"_id"）;
if （_tag == undefined） { return false; }
_this.showEvent（）;
_this.selectedIndex（_index）;
return true;
}
//设置下拉列表
this.setDropdown = function （default_data, list） {
var css = _tag.attr（"class"）;
if （default_data == undefined） {
default_data = { id: "null", name: "" };
}
var _html = "";
if （_tag.find（"p"）.length > 0 && _tag.find（"span"）.length > 0） {
$.each（list, function （i, value） {
_html += "<a _id="" + value.id + "">" + value.name + "</a>";
}）;
_tag.find（"span font"）.replaceWith（"" + default_data.name + ""）;
_tag.find（"p"）.html（_html）;
} else {
_html = "<div class="dropdown " + css + "">";
_html += "" + default_data.name + "<a></a>";
_html += "";
if （list） {
$.each（list, function （i, value） {
_html += "<a _id="" + value.id + "">" + value.name + "</a>";
}）;
}
_html += "";
_html += "</div>";
var parent = _tag.parent（）;
_tag.replaceWith（_html）;
_tag = parent.find（".dropdown" + （css.length > 0 ？ "." + css.replace（" ", "."） : ""））;
}
}
//下拉事件
this.showEvent = function （） {
_tag.find（"span"）.unbind（"click"）.click（function （） {
var p = $（this）.parent（）.find（"p"）;
if （p.css（"display"） == "block"） {
p.css（"display", "none"）;
$（this）.removeClass（"active"）;
} else if （p.html（）.length > 0） {
p.css（"display", "block"）;
$（this）.addClass（"active"）;
}
}）;
}
//选中事件
this.selectedIndex = function （index） {
_tag.find（"p a"）.unbind（"click"）.click（function （） {
var parent = $（this）.parent（）.parent（）;
//给下拉框赋值
if （$（this）.text（）.length > 0） {
var font = parent.find（"font"）;
font.text（$（this）.text（））;
font.attr（"_id", $（this）.attr（"_id"））;
_this.selectedIndexExpand（parent, $（this）.index（））;
parent.find（"span"）.removeClass（"active"）;
}
parent.find（"p"）.css（"display", "none"）;
}）;
if （_tag.find（"p a"）.length <= _index） _index = 0;
if （_value && _value ！= ""） {
_index = _tag.find（"p a[_id="" + _value + ""]"）.index（）;
}
_tag.find（"p a:eq（" + _index + "）"）.click（）;
}
//选中事件扩展
this.selectedIndexExpand = function （tag, index） { }
}

2、示例代码：
复制代码代码如下:
//http://www.naoqiu.com
var array_state = [{ id: -1, name: "状态" }, { id: 1, name: "未成功" }, { id: 2, name: "成功" }, { id: 3, name: "失败"}];
//状态下拉控件
var select_type = new ComboBox（）;
select_type.tag = $（".select_type"）;
select_type.data_default = array_state[0];
select_type.data_list = array_state;
select_type.selectedIndexExpand = function （tag, index） {
//fun_Pager（）;
}
select_type.init（）;

3、示例图：