console 命令行工具 X clear

console

window.onload=function(){
	var box=document.getElementById('divselect'),
	    title=box.getElementsByTagName('cite')[0],
	    menu=box.getElementsByTagName('ul')[0],
	    as=box.getElementsByTagName('a'),
	    len = as.length;
	//阻止事件冒泡方法
	function stopPropagation (e) {
		e = e || window.event;
		if (e.stopPropagation) {
			e.stopPropagation();
		} else {
			e.cancelBubble = true;
		}
	}
	//添加事件方法
	function addEvent(elem, type, fun) {
		if (elem.addEventListener) {
			elem.addEventListener(type, fun);
		} else if (elem.attachEvent) {
			elem.attachEvent("on" + type, fun);
		} else {
			elem["on" + type] = fun;
		}
	}
	//删除事件方法
	function removeEvent (elem, type, fun) {
		if (elem.removeEventListener) {
			elem.removeEventListener(type, fun);
		} else if (elem.detachEvent) {
			elem.detachEvent("on" + type, fun);
		} else {
			elem["on" + type] = null;
		}
	}

	function winKeyDown (e) {
		var activatedA = getActivated(),
			selectid = activatedA && activatedA.getAttribute("selectid");
		cleanActivated();
		if (e.keyCode == 40) {
			if (!selectid) {
				activeA(as[0]);
			} else if (selectid < 5) {
				activeA(as[selectid]);
			}
		} else if (e.keyCode == 38) {
			if (!selectid) {
				activeA(as[4]);
			} else if (selectid > 1) {
				activeA(as[selectid - 2]);
			}
		} else if (e.keyCode == 13) {
			if (!selectid) {
				title.innerHTML = "请选择分类";
			} else {
				title.innerHTML = as[selectid - 1].innerHTML;
			}
			hideMenu();
		}
	}

	function clickA (e) {
		title.innerHTML = this.innerHTML;
		hideMenu();
		stopPropagation(e);
	}

    function clickTitle (e) {
        menu.style.display = 'block';
    	addEvent(window, "click", clickWin);  // 点击页面空白处时
        addEvent(window, "keydown", winKeyDown);
        stopPropagation(e);
    }

    function clickWin () {
    	title.innerHTML = "请选择分类";
		hideMenu();
    }

    function hideMenu () {
    	cleanActivated();
    	menu.style.display = 'none';
    	removeEvent(window, "click", clickWin);
    	removeEvent(window, "keydown", winKeyDown);
    }

    function getActivated () {
    	for (var i = 0; i < len; i++) {
    		if (as[i].className == "active") {
    			return as[i];
    		}
    	}
    	return null;
    }

    function cleanActivated () {
    	var activatedA = getActivated();
    	if (activatedA) {
    		activatedA.className = null;
    	}
    }

    function mouseoverA (e) {
    	cleanActivated();
    	activeA(this);
    }

    function activeA (e) {
    	e.className = "active";
    }

    addEvent(title, "click", clickTitle);    // 点击文本框
    for (var i = 0; i < len; i++) {
    	addEvent(as[i], "mouseover", mouseoverA);
    	addEvent(as[i], "mouseout", cleanActivated);
    	addEvent(as[i], "click", clickA);
    }
}

<body>
	<div id="divselect">
		<cite>请选择分类</cite>
		<ul>
		    <li id="li"><a href="javascript:;" selectid="1">ASP开发</a></li>
		    <li><a href="javascript:;" selectid="2">.NET开发</a></li>
		    <li><a href="javascript:;" selectid="3">PHP开发</a></li>
		   	<li><a href="javascript:;" selectid="4">Javascript开发</a></li>
		    <li><a href="javascript:;" selectid="5">Java特效</a></li>
		</ul>
	</div>!
</body>

body,ul,li{ margin:0; padding:0; font-size:13px;}
ul,li{list-style:none;}
#divselect{width:536px; margin:80px auto; position:relative; z-index:1;}
#divselect cite{background-color: #FFF; width:500px; height:24px; line-height:24px; display:block; color:#807a62; cursor:text; font-style:normal; padding-left:4px; padding-right:30px; border:1px solid #333; }
#divselect ul{width:534px;border:1px solid #333; background-color:#FFF; position:absolute; z-index:2; margin-top:-1px; display:none;}
#divselect ul li{height:24px; line-height:24px;}
#divselect ul li a{display:block; height:24px; color:#333; text-decoration:none; padding-left:10px; padding-right:10px;}
.active {background-color: #CCC; }