<style>
.uboxstyle{width:174px;height:39px;float:right;}
#uboxstyle{width:174px;height:39px;float:right;}
#uboxstyle.select_box{width:174px;height:39px;float:left;}
#uboxstylediv.tag_select{display:block;color:#79A2BD;width:174px;height:39px;background:transparenturl("images/select01.jpg")no-repeat00;padding:010px;line-height:39px;}
#uboxstylediv.tag_select_hover{display:block;color:#79A2BD;width:174px;height:39px;background:transparenturl("images/select01.jpg")no-repeat00;padding:010px;line-height:39px;}
#uboxstylediv.tag_select_open{display:block;color:#79A2BD;width:174px;height:39px;background:transparenturl("images/select01.jpg")no-repeat00px;padding:010px;line-height:39px;}
#uboxstyleul.tag_options{padding:0;margin:0;list-style:none;width:174px;padding:005px;margin:0;}
#uboxstyleul.tag_optionsli{display:block;width:174px;padding:010px;height:30px;text-decoration:none;line-height:30px;color:#79A2BD;text-align:left;}
#uboxstyleul.tag_optionsli.open_hover{color:#000}
#uboxstyleul.tag_optionsli.open_selected{color:#000}
</style>
<scriptlanguage="JavaScript">
varselects=document.getElementsByTagName('select');
varisIE=(document.all&&window.ActiveXObject&&!window.opera)?true:false;
function$(id){
returndocument.getElementById(id);
}
functionstopBubbling(ev){
ev.stopPropagation();
}
functionrSelects(){
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=newFunction("clickLabels3('"+selects[i].name+"');window.event.cancelBubble=true;");
}
elseif(!isIE){
selects[i].onclick=newFunction("clickLabels3('"+selects[i].name+"')");
selects[i].addEventListener("click",stopBubbling,false);
}
}
}
functionrOptions(i,name){
varoptions=selects[i].getElementsByTagName('option');
varoptions_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=newFunction("clickOptions("+i+","+n+",'"+selects[i].name+"')");
}
}
functionmouseSelects(name){
varsincn='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=newFunction("clickSelects('"+name+"');window.event.cancelBubble=true;");
}
elseif(!isIE){
$(sincn).onclick=newFunction("clickSelects('"+name+"');");
$('select_info_'+name).addEventListener("click",stopBubbling,false);
}
}
functionclickSelects(name){
varsincn='select_info_'+name;
varsinul='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='';
}
elseif($(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';
}
}
}
functionclickOptions(i,n,name){
varli=$('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>
<divstyle="width:500px;">
<formid="form1"name="form1"method="post"action="?Action=Select"style="padding:0px;">
<divstyle="width:200px;float:left;text-align:left;margin-top:8px;">
<divid="uboxstyle">
<selectname="select1"id="language">
<optionvalue="1">Cars...</option>
</select>
</div>
</div>
<divstyle="width:200px;float:left;text-align:left;margin-top:8px;">
<divid="uboxstyle">
<selectname="select2"id="language2">
<optionvalue="">all</option>
</select>
</div>
</div>
<divstyle="width:100px;float:left">
<inputtype="submit"name="button"id="button"value=""style="background-image:url(images/selectbt.jpg);width:92px;height:38px;border:0px;cursor:hand;"/>
</div>
</form></div>
|