Copy codeThe Code is as follows:
<Style>
. Uboxstyle {width: 174px; height: 39px; float: right ;}
# Uboxstyle {width: 174px; height: 39px; float: right ;}
# Uboxstyle. select_box {width: 174px; height: 39px; float: left ;}
# Uboxstyle div. tag_select {display: block; color: # 79A2BD; width: 174px; height: 39px; background: transparent url ("images/select01.jpg") no-repeat 0 0; padding: 0 10px; line-height: 39px ;}
# Uboxstyle div. tag_select_hover {display: block; color: # 79A2BD; width: 174px; height: 39px; background: transparent url ("images/select01.jpg") no-repeat 0 0; padding: 0 10px; line-height: 39px ;}
# Uboxstyle div. tag_select_open {display: block; color: # 79A2BD; width: 174px; height: 39px; background: transparent url ("images/select01.jpg") no-repeat 0 0px; padding: 0 10px; line-height: 39px ;}
# Uboxstyle ul. tag_options {padding: 0; margin: 0; list-style: none; width: 174px; padding: 0 0 5px; margin: 0 ;}
# Uboxstyle ul. tag_options li {display: block; width: 174px; padding: 0 10px; height: 30px; text-decoration: none; line-height: 30px; color: # 79A2BD; text-align: left ;}
# Uboxstyle ul. tag_options li. open_hover {color: #000}
# Uboxstyle ul. tag_options li. open_selected {color: #000}
</Style>
<Script language = "JavaScript">
Var selects = document. getElementsByTagName ('select ');
Var isIE = (document. all & window. ActiveXObject &&! Window. opera )? True: false;
Function $ (id ){
Return document. getElementById (id );
}
Function stopBubbling (ev ){
Ev. stopPropagation ();
}
Function rSelects (){
For (I = 0; I <selects. length; I ++ ){
Selects [I]. style. display = 'none ';
Select_tag = document. createElement ('div ');
Select_tag.id = 'select _ '+ selects [I]. name;
Select_tag.className = 'select _ box ';
Selects [I]. parentNode. insertBefore (select_tag, selects [I]);
Select_info = document. createElement ('div ');
Select_info.id = 'select _ info _ '+ selects [I]. name;
Select_info.className = 'tag _ select ';
Select_info.style.cursor = 'pointer ';
Select_tag.appendChild (select_info );
Select_ul = document. createElement ('ul ');
Select_ul.id = 'Options _ '+ selects [I]. name;
Select_ul.className = 'tag _ options ';
Select_ul.style.position = 'absolute ';
Select_ul.style.display = 'none ';
Select_ul.style.zIndex = '2013 ';
Select_tag.appendChild (select_ul );
ROptions (I, selects [I]. name );
MouseSelects (selects [I]. name );
If (isIE ){
Selects [I]. onclick = new Function ("clickLabels3 ('" + selects [I]. name + "'); window. event. cancelBubble = true ;");
}
Else if (! IsIE ){
Selects [I]. onclick = new Function ("clickLabels3 ('" + selects [I]. name + "')");
Selects [I]. addEventListener ("click", stopBubbling, false );
}
}
}
Function rOptions (I, name ){
Var options = selects [I]. getElementsByTagName ('option ');
Var options_ul = 'Options _ '+ name;
For (n = 0; n <selects [I]. options. length; n ++ ){
Option_li = document. createElement ('lil ');
Option_li.style.cursor = 'pointer ';
Option_li.className = 'open ';
$ (Options_ul). appendChild (option_li );
Option_text = document. createTextNode (selects [I]. options [n]. text );
Option_li.appendChild (option_text );
Option_selected = selects [I]. options [n]. selected;
If (option_selected ){
Option_li.className = 'open _ selected ';
Option_li.id = 'selected _ '+ name;
$ ('Select _ info _ '+ name). appendChild (document. createTextNode (option_li.innerHTML ));
}
Option_li.onmouseover = function () {this. className = 'open _ hover ';}
Option_li.onmouseout = function (){
If (this. id = 'selected _ '+ name ){
This. className = 'open _ selected ';
}
Else {
This. className = 'open ';
}
}
Option_li.onclick = new Function ("clickOptions (" + I + "," + n + ", '" + selects [I]. name + "')");
}
}
Function mouseSelects (name ){
Var sincn = 'select _ info _ '+ name;
$ (Sincn). onmouseover = function () {if (this. className = 'tag _ select') this. className = 'tag _ select_hover ';}
$ (Sincn). onmouseout = function () {if (this. className = 'tag _ select_hover ') this. className = 'tag _ select ';}
If (isIE ){
$ (Sincn). onclick = new Function ("clickSelects ('" + name + "'); window. event. cancelBubble = true ;");
}
Else if (! IsIE ){
$ (Sincn). onclick = new Function ("clickSelects ('" + name + "');");
$ ('Select _ info _ '+ name). addEventListener ("click", stopBubbling, false );
}
}
Function clickSelects (name ){
Var sincn = 'select _ info _ '+ name;
Var sinul = 'Options _ '+ name;
For (I = 0; I <selects. length; I ++ ){
If (selects [I]. name = name ){
If ($ (sincn). className = 'tag _ select_hover '){
$ (Sincn). className = 'tag _ select_open ';
$ (Sinul). style. display = '';
}
Else if ($ (sincn). className = 'tag _ select_open '){
$ (Sincn). className = 'tag _ select_hover ';
$ (Sinul). style. display = 'none ';
}
}
Else {
$ ('Select _ info _ '+ selects [I]. name). className = 'tag _ select ';
$ ('Options _ '+ selects [I]. name). style. display = 'none ';
}
}
}
Function clickOptions (I, n, name ){
Var li = $ ('Options _ '+ name). getElementsByTagName ('lil ');
$ ('Selected _ '+ name). className = 'open ';
$ ('Selected _ '+ name). id = '';
Li [n]. id = 'selected _ '+ name;
Li [n]. className = 'open _ hover ';
$ ('Select _ '+ name). removeChild ($ ('select _ info _' + name ));
Select_info = document. createElement ('div ');
Select_info.id = 'select _ info _ '+ name;
Select_info.className = 'tag _ select ';
Select_info.style.cursor = 'pointer ';
$ ('Options _ '+ name). parentNode. insertBefore (select_info, $ ('Options _' + name ));
MouseSelects (name );
$ ('Select _ info _ '+ name). appendChild (document. createTextNode (li [n]. innerHTML ));
$ ('Options _ '+ name). style. display = 'none ';
$ ('Select _ info _ '+ name). className = 'tag _ select ';
Selects [I]. options [n]. selected = 'selected ';
}
Window. onload = function (e ){
Bodyclick = document. getElementsByTagName ('body'). item (0 );
RSelects ();
Bodyclick. onclick = function (){
For (I = 0; I <selects. length; I ++ ){
$ ('Select _ info _ '+ selects [I]. name). className = 'tag _ select ';
$ ('Options _ '+ selects [I]. name). style. display = 'none ';
}
}
}
</Script>
<Div style = "width: 500px;">
<Form id = "form1" name = "form1" method = "post" action = "? Action = Select "style =" padding: 0px; ">
<Div style = "width: 200px; float: left; text-align: left; margin-top: 8px;">
<Div id = "uboxstyle">
<Select name = "select1" id = "language">
<Option value = "1"> Cars... </option>
</Select>
</Div>
</Div>
<Div style = "width: 200px; float: left; text-align: left; margin-top: 8px;">
<Div id = "uboxstyle">
<Select name = "select2" id = "language2">
<Option value = ""> all </option>
</Select>
</Div>
</Div>
<Div style = "width: 100px; float: left">
<Input type = "submit" name = "button" id = "button" value = "" style = "background-image: url (images/selectbt.jpg); width: 92px; height: 38px; border: 0px; cursor: hand; "/>
</Div>
</Form> </div>