You can modify the nice drop-down Box Based on jquery.

I will continue to post an article about the web Front-end custom control-ComboBox (drop-down box). In the past, I used the drop-down box control to worry about the ugly style. Now I want to share this control, hope that useful colleagues can add to favorites or make secondary modifications to achieve the desired effect.

Break down the custom drop-down box:

1. Create a constructor and initialize the value assignment control.

2. Bind the control to the front-end.

3. Click the drop-down box control 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 to trigger the event.

The Code is as follows:

Html code:
Copy codeThe Code is as follows:
<B class = "select_type"> </B>

Css style:
Copy codeThe Code is as follows:
. Dropdown span a {float: left; background: url (/img/Icon_BG.png );}
/* Drop-down box http://power.76741.com */
. Dropdown span a {background-position:-pixel PX-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:
Copy codeThe Code is as follows:
// Drop-down list
Var ComboBox = function (){
This. tag;
This. data_default;
This. data_list;
This. index = 0;

Var _ this = this;
Var _ index, _ tag, _ value;
// Initialization
This. init = function (){
_ Tag = _ this. tag;
_ Index = _ this. index;
// Set the object
_ This. setDropdown (_ this. data_default, _ this. data_list );
// Assign a value to the binding event
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'hangzhou.html (_ html );
} Else {
_ Html = '<div class = "dropdown' + css + '"> ';
_ Html + = '<span> <font _ id = "' + default_data.id + '">' + default_data.name + '</font> <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 ('','.'):''));
}
}
// 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 ');
}
});
}
// 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 list
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'hangzhou.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 ();
}
// Selected event Extension
This. selectedIndexExpand = function (tag, index ){}
}

2. Sample Code:
Copy codeThe Code is as follows:
// Http://www.naoqiu.com
Var array_state = [{id:-1, name: 'status'}, {id: 1, name: 'unsuccessful '}, {id: 2, name: 'success'}, {id: 3, name: 'failed'}];
// Status drop-down 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. Example diagram: