Tip: you can modify some code before running
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>My select</title> <style type="text/css"> <!-- body { margin: 0px; padding: 30px 0px 0px 30px; background-color: #CFDFEF; font-size: 12px; } .selectA { width: 92px; height: 17px; padding-left: 10px; padding-top: 5px; background-image: url(yun_qi_img/tm2008-select.gif); overflow: hidden; cursor: pointer; } .selectB { display: none; width: 81px; height: auto; background-image: url(yun_qi_img/tm2008-select.gif); background-position: -102px 0px; border-bottom: 1px solid #4EA0D1; } .selectB .item { width: 71px; height: 17px; background-image: url(yun_qi_img/tm2008-select.gif); background-position: -102px 0px; padding-left: 10px; padding-top: 5px; overflow: hidden; cursor: pointer; } --> </style> <script type="text/javascript"> <!-- //val var items = null; var selectA = null; var selectB = null; var selectAClicked = false; //method function $(s) { return document.getElementById(s); } window.onload = function() { items = [$("itemA"),$("itemB"),$("itemC"),$("itemD"),$("itemE"),$("itemF"),$("itemG"),$("itemH")]; selectA = $("selectA"); selectB = $("selectB"); //init items[0].style.backgroundPosition = "0px -66px"; //selectA event selectA.onmouseover = function() { if(selectAClicked) return; this.style.backgroundPosition = "0px -22px"; } selectA.onmouseout = function() { if(selectAClicked) return; this.style.backgroundPosition = "0px 0px"; } selectA.onclick = function() { if(selectAClicked) { selectAClicked = false; this.style.backgroundPosition = "0px -22px"; selectB.style.display = "none"; return; } selectAClicked = true; this.style.backgroundPosition = "0px -44px"; selectB.style.display = "block"; } //selectB event //none //items event function itemMouseOver() { this.style.backgroundPosition = "0px -88px"; } function itemMouseOut() { if(this.innerHTML == selectA.innerHTML) { this.style.backgroundPosition = "0px -66px"; return; } this.style.backgroundPosition = "-102px 0px"; } function itemClick() { for(var i=0,length=items.length;i<length;i++) items[i].style.backgroundPosition = "-102px 0px"; this.style.backgroundPosition = "0px -66px"; selectA.innerHTML = this.innerHTML; selectB.style.display = "none"; selectA.style.backgroundPosition = "0px 0px"; selectAClicked = false; } for(var i=0,length=items.length;i<length;i++) { items[i].onmouseover = itemMouseOver; items[i].onmouseout = itemMouseOut; items[i].onclick = itemClick; } } //--> </script></head><body><div class="selectA" id="selectA">ItemA</div><div class="selectB" id="selectB"> <div class="item" id="itemA">ItemA</div> <div class="item" id="itemB">ItemB</div> <div class="item" id="itemC">ItemC</div> <div class="item" id="itemD">ItemD</div> <div class="item" id="itemE">ItemE</div> <div class="item" id="itemF">ItemF</div> <div class="item" id="itemG">ItemG</div> <div class="item" id="itemH">ItemH</div></div></body></html>
Tip: you can modify some code before running
