<!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控件</title> <style> html,body{height:100%;overflow:hidden;} body,div,form,h2,ul,li{margin:0;padding:0;} ul{list-style-type:none;} body{font:12px/1.5 \5fae\8f6f\96c5\9ed1;} #search,#search .box,#search form{height:34px;} #search{position:relative;width:350px;margin:10px auto;} #search .box{background-position:right 0;} #search form{background-repeat:repeat-x;background-position:0 -34px;margin:0 20px 0 40px;} #search .select{float:left;width:190px;height:22px;cursor:pointer;margin-top:4px;line-height:22px;padding-left:10px;background-position:0 -68px;} #search a{float:left;width:80px;height:24px;color:#333;letter-spacing:4px;line-height:22px;text-align:center;text-decoration:none;background-position:0 -90px;margin:4px 0 0 10px;} #search a:hover{color:#f60;background-position:-80px -90px;} #search .sub{position:absolute;top:26px;left:40px;width:198px;border:1px solid #ccc;display:none;} #search .sub li{height:25px;line-height:24px;cursor:pointer;padding-left:10px;margin-bottom:-1px;border-bottom:1px dotted #fff;} #search .sub li.hover{background:#8b8b8b;} </style> </head> <body> <div id="search"> <div class="box"> <form> <span class="select" id="J_trigger">请选择游戏名称</span> <input type="hidden" name="" id="j_hidden" value="" /> </form> </div> <ul class="sub" id="J_select" > <li>地下城与勇士</li> <li>魔兽世界（国服）</li> <li>魔兽世界（台服）</li> <li>热血江湖</li> <li>神鬼传奇</li> <li>大话西游II</li> <li>QQ幻想世界</li> </ul> </div> <script type="text/javascript"> /* * class Dropdown 模拟select * @param {ELEMENT} * @return {Dropdown INSTANCE} * @author: zzf */ function Dropdown() { if (!(this instanceof Dropdown)) { return new Dropdown(); } this.init.apply(this, arguments); } Dropdown.prototype={ 'constructor': Dropdown, 'chgVal' : function (el){ this.trigger.innerHTML = el.innerHTML; if (this.hidden) { this.hidden.value = el.innerHTML; } }, 'on': function (el){ var i=0,len=this.items.length; for(; i<len; i++) { this.items[i].className = this.offCls; } el.className = this.onCls; }, 'init' : function (opts) { if (!(opts && opts.trigger && opts.select)) { return;} this.trigger = opts.trigger; this.select = opts.select; this.items= this.select.getElementsByTagName(opts.tagName || 'LI'); this.onCls= opts.onCls || 'hover'; this.offCls= opts.offCls || ''; this.hidden = opts.hidden; this.show = false ; var self = this,i=0,len=this.items.length,index=0,el; this.trigger.onclick = function (e){ var style = self.select.style; style.display = style.display == "block" ? "none" : "block"; (e || window.event).cancelBubble = true; if (style.display!=='none') { self.show = true ; } }; for (; i < len; i++) { this.items[i].onmouseover = (function (i){ return function (){ self.on(this); index= i; } }(i)); this.items[i].onmouseout = function (){ this.className = opts.offCls; }; this.items[i].onclick = function (e){ self.chgVal(this); self.show = false; }; } document.onclick = function (){ self.select.style.display = "none"; }; document.onkeyup = function (e){ var e = e || window.event, target = e.target || e.srcElement, key = e.which || e.keyCode; if (!self.show) {return;} switch (key) { case 38: //up if (--index < 0) { index = len - 1; }; el= self.items[index]; self.on(el); self.chgVal(el); break; //down case 40: if (++index > len - 1) { index = 0 }; el= self.items[index]; self.on(el); self.chgVal(el); break; //enter case 13: case 27: el= self.items[index]; self.chgVal(el); self.select.style.display = "none"; self.show = false; break; default: ; } } } } function $(id){ return document.getElementById(id); } new Dropdown({ trigger : $('J_trigger'), select : $('J_select'), hidden: $('j_hidden') }); </script> </body> </html>
运行代码
