Beautiful drop down box based on jquery extension can be modified twice

Continue to send a web front end custom control - ComboBox(drop-down box), I used to use the drop-down box control always for ugly style and trouble, now share this control, hope useful colleagues can be favorites, or make a second modification, to achieve the effect you want.

Custom drop-down box:

1. Create a constructor to initialize the value of the assign control.

2. Bound controls are displayed in the foreground.

3. Click the drop-down box to display the drop-down list

4. Click the trigger drop-down box control to collapse the drop-down list.

5. Click the drop-down item to trigger the event.

The code is as follows:

Html code:

 
<b class="select_type"></b> 

CSS styles:

 
.dropdown span a{float:left;background:url(/img/Icon_BG.png);} 
/* A drop-down box  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 code:

1. Custom class:

 
//A drop-down box
var ComboBox = function () { 
this.tag; 
this.data_default; 
this.data_list; 
this.index = 0; 

var _this = this; 
var _index, _tag, _value; 
//Initialize the
this.init = function () { 
_tag = _this.tag; 
_index = _this.index; 
//Set the object
_this.setDropdown(_this.data_default, _this.data_list); 
//Assign bound events
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; 
} 
//Set the drop-down list
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('<font _id="' + default_data.id + '">' + default_data.name + '</font>'); 
_tag.find('p').html(_html); 
} else { 
_html = '<div class="dropdown ' + css + '">'; 
_html += '<span><font _id="' + default_data.id + '">' + default_data.name + '</font><a></a></span>'; 
_html += '<p>'; 
if (list) { 
$.each(list, function (i, value) { 
_html += '<a _id="' + value.id + '">' + value.name + '</a>'; 
}); 
} 
_html += '</p>'; 
_html += '</div>'; 
var parent = _tag.parent(); 
_tag.replaceWith(_html); 
_tag = parent.find('.dropdown' + (css.length > 0 ? '.' + css.replace(' ', '.') : '')); 
} 
} 
//The drop-down event
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'); 
} 
}); 
} 
//The selected event
this.selectedIndex = function (index) { 
_tag.find('p a').unbind('click').click(function () { 
var parent = $(this).parent().parent(); 
//Assign a value to the drop-down box
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(); 
} 
//Select event extension
this.selectedIndexExpand = function (tag, index) { } 
} 

2. Sample code:

 
//http://www.naoqiu.com 
var array_state = [{ id: -1, name: ' state ' }, { id: 1, name: ' unsuccessful ' }, { id: 2, name: ' successful ' }, { id: 3, name: ' failure '}]; 
//State dropdown control
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. Sample figure:
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201311/201311191556382.gif? 20131019155656 ">