提示：您可以先修改部分代碼再運行
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>select demo</title><style type="text/css">body{background:#cfdfef;font:12px/150% "lucida grande", arial, verdana, helvetica, sans-serif;}#uboxstyle .select_box{width:100px;height:24px;}#macstyle .select_box{width:91px;height:24px;}#tm2008style .select_box{width:102px;height:24px;}#uboxstyle div.tag_select{display:block;color:#79a2bd;width:80px;height:24px;background:transparent url("ubox-select.gif") no-repeat 0 0;padding:0 10px;line-height:24px;}#uboxstyle div.tag_select_hover{display:block;color:#79a2bd;width:80px;height:24px;background:transparent url("ubox-select.gif") no-repeat 0 -24px;padding:0 10px;line-height:24px;}#uboxstyle div.tag_select_open{display:block;color:#79a2bd;width:80px;height:24px;background:transparent url("ubox-select.gif") no-repeat 0 -48px;padding:0 10px;line-height:24px;}#uboxstyle ul.tag_options{position:absolute;padding:0;margin:0;list-style:none;background:transparent url("ubox-select.gif") no-repeat right bottom;width:100px;padding:0 0 5px;margin:0;}#uboxstyle ul.tag_options li{background:transparent url("ubox-select.gif") repeat-y -100px 0;display:block;width:80px;padding:0 10px;height:24px;text-decoration:none;line-height:24px;color:#79a2bd;}#uboxstyle ul.tag_options li.open_hover{background:transparent url("ubox-select.gif") no-repeat 0 -72px;color:#fff}#uboxstyle ul.tag_options li.open_selected{background:transparent url("ubox-select.gif") no-repeat 0 -96px;color:#fff}#macstyle div.tag_select{display:block;color:#000;width:71px;height:24px;background:transparent url("mac-select.gif") no-repeat 0 -24px;padding:0 10px;line-height:24px;}#macstyle div.tag_select_hover{display:block;color:#000;width:71px;height:24px;background:transparent url("mac-select.gif") no-repeat 0 0;padding:0 10px;line-height:24px;}#macstyle div.tag_select_open{display:block;color:#000;width:71px;height:24px;background:transparent url("mac-select.gif") no-repeat 0 -48px;padding:0 10px;line-height:24px;}#macstyle ul.tag_options{position:absolute;margin:-4px 0 0;list-style:none;background:transparent url("mac-select.gif") no-repeat left bottom;width:100px;padding:0 0 5px;margin:0;width:71px;}#macstyle ul.tag_options li{background:transparent url("mac-select.gif") repeat-y -91px 0;display:block;width:61px;padding:0 0 0 10px;height:24px;text-decoration:none;line-height:24px;color:#000;}#macstyle ul.tag_options li.open_hover{background:transparent url("mac-select.gif") no-repeat -162px 0;color:#000}#macstyle ul.tag_options li.open_selected{background:transparent url("mac-select.gif") no-repeat -162px -24px;color:#fff}#tm2008style div.tag_select{display:block;color:#000;width:82px;height:22px;background:transparent url("tm2008-select.gif") no-repeat 0 0;padding:0 10px;line-height:22px;}#tm2008style div.tag_select_hover{display:block;color:#000;width:82px;height:22px;background:transparent url("tm2008-select.gif") no-repeat 0 -22px;padding:0 10px;line-height:22px;}#tm2008style div.tag_select_open{display:block;color:#000;width:82px;height:22px;background:transparent url("tm2008-select.gif") no-repeat 0 -44px;padding:0 10px;line-height:22px;}#tm2008style ul.tag_options{position:absolute;margin:0;list-style:none;background:transparent url("tm2008-select.gif") no-repeat left bottom;width:100px;padding:0 0 1px;margin:0;width:80px;}#tm2008style ul.tag_options li{background:transparent url("tm2008-select.gif") repeat-y -102px 0;display:block;width:61px;padding:0 10px;height:22px;text-decoration:none;line-height:22px;color:#000;}#tm2008style ul.tag_options li.open_hover{background:transparent url("tm2008-select.gif") no-repeat 0 -88px;color:#000}#tm2008style ul.tag_options li.open_selected{background:transparent url("tm2008-select.gif") no-repeat 0 -66px;color:#19555f}</style><script type="text/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></head><body><form id="form" name="form" method="post" action="">示範：手機主題下載<br /><br /><div id="uboxstyle"><h3 >u-box style</h3><select name="language" id="language"><option value="english" selected="selected">english</option><option value="簡體中文" >簡體中文</option><option value="日本" >日本</option><option value="deutsch" >deutsch</option><option value="espa?ol" >espa?ol</option><option value="fran?ais" >fran?ais</option><option value="italiano" >italiano</option><option value="polski" >polski</option></select></div><br /><br /><h3 >mac style</h3><div id="macstyle"><select name="language_mac" id="language_mac"><option value="english" selected="selected">english</option><option value="簡體中文" >簡體中文</option><option value="deutsch" >deutsch</option><option value="italiano" >italiano</option><option value="polski" >polski</option></select></div><br /><br /><h3 >tm2008 style</h3><div id="tm2008style"><select name="language_tm2008" id="language_tm2008"><option value="english">english</option><option value="簡體中文" >簡體中文</option><option value="deutsch" >deutsch</option><option value="italiano" >italiano</option><option value="polski" >polski</option></select></div><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></form></body></html>
提示：您可以先修改部分代碼再運行
