繼續發一篇關於web前端自訂控件－ComboBox(下拉框),以往我在使用下拉框控件老是為了樣式醜陋而煩惱，現在分享這個控件，希望有用的同仁們可以收藏，或進行二次修改，達到你想要的效果。
分解自訂下拉方塊：
1.建立建構函數，初始化賦值控制項值。
2.綁定控制呈現在前台。
3.點選下拉框控件，顯示下拉清單
4.點選觸發下拉方塊控件，收起下拉清單。
5.點選下拉項觸發事件。
代碼如下：
Html代碼：
//下拉框
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);
回傳真;
}
//設定下拉清單
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 = '
' value.name ''
});
_tag.find('span font').replaceWith('
'default_data.name '');
_tag.find('p').html(_html);
} else {
_html = '
';
varparent = _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( '顯示' , '無');
$(this).removeClass('active');
} else if (p.html().length > 0) {
p.css( '顯示', '阻止');
$(this).addClass('active')
}
});
}
//選取事件
this.selectedIndex = function (index) {
_tag.find('p a').unbind('click').click(function () {
varparent = $(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');
}
家長。 find('p').css('顯示', '無');
});
if (_tag.find('p a').length if (_value && _value != '') {
_index = _tag.find('p a[_id="' _value '"]').index();
}
_tag.find('p a:eq(' _index ')').click();
}
//選取事件擴充
this.selectedIndexExpand = function (tag, index) { }
}
