<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <script language="javascript"> //将选择的select元素的值追加到输入框中原来数据的后面 function connectSex(){ var sexTextObj=document.form1.sexText; var sexObj=document.form1.sex; var sexValue=sexObj.options[sexObj.selectedIndex].value; if(sexTextObj.value=="" || sexTextObj.value==null){ sexTextObj.value=sexValue; }else{ sexTextObj.value=sexTextObj.value+"、"+sexValue; } } //目的在于学习如何屏蔽HTML元素原来已经有的事件,建立新的事件 function selectEvent(){ if(event.keyCode==38 ||event.keyCode==40){ //使HTML元素原来默认的事件失效 event.returnValue=false; var selectObj=document.form1.sex; var currentIndex=selectObj.selectedIndex; //如果是上键:只是选中 if(event.keyCode==38 ){ //alert("上键--"+currentIndex); if(currentIndex==0){ return false; }else{ selectObj.options[currentIndex-1].selected=true; return; } } //如果是下键 if(event.keyCode==40 ){ //alert("下键--"+currentIndex+"selectObj.options.length:"+selectObj.options.length); if(currentIndex==selectObj.options.length-1){ return false; }else{ selectObj.options[1].selected=true; return ; } } } //如果是空格键,则把选中的内容添加文本域中 if(event.keyCode==32){ connectSex(); } } </script> </HEAD> <BODY> <form method="post" name="form1" action=""> <input type="text" name="text1" value="text1"/> <input type="text" name="text2" value="text2"/><br/> <select name="sex" onChange="connectSex()" οnkeydοwn="selectEvent()"> <option value="girl">女</option> <option value="boy">男</option> </select> <!--Tab键会自动跳过hidden类的控件--> <input type="hidden" name="text3" value="text3"> <input type="text" name="sexText" value=""/> </form> </BODY> </HTML>