<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=\'999\';
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(\'li\');
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(\'li\');
$(\'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>