window.onload=dropdown;

function dropdown(){

var showbox=document.getElementById("showbox"),

lists=document.getElementById("lists"),

tzj=document.getElementsByTagName("li");

//鼠標點擊功能

showbox.onclick=function(event){

event=event||window.event

if(event.stopPropagation){

? ? ? ? ? event.stopPropagation();

?? ? }else{

? ? ? ? ? event.cancelBubble=true;

?? ? }

lists.style.display="block"

}

for(i=0,j=tzj.length;i<j;i++){

tzj[i].onmouseover=function(){

this.style.background="#ccc";

}

tzj[i].onmouseout=function(){

this.style.background="white";

}

tzj[i].onclick=function(e){

e=event||window.event

var classify=document.getElementById("classify")

if(e.stopPropagation){

? ? ? ? ? e.stopPropagation();

?? ? }else{

? ? ? ? ? e.cancelBubble=true;

}

? ? ?

classify.innerHTML=this.innerHTML

?? ? lists.style.display="none";

? ? }

? ? }

document.onclick=function(){

lists.style.display="none";

}

//鍵盤功能

? document.onkeyup=function(event){

? event=event||window.event

? var index=-1;

? ?

? for(i=0,j=tzj.length;i++;i<j){

?

? if(event.keyCode==40){

? index++;

? console.log(index)

? if(index>=tzj.length){

?? ? ? ? ? ? ? index=0;

? ? ? ? ? ? }

? tzj[index].style.background="#ccc";

?

? }

?

? if(event.keyCode==38){

?? ? ? ? ? ? if(index<=0){

?? ? ? ? ? ? ? index=as.length;

?? ? ? ? ? ? }

?? ? ? ? ? ? index--;? ?

?? ? ? ? ? ? tzj[index].style.background="#ccc"; ? ? ?

? ? ? ? ? }

}

?

? }

}