请教牛人帮忙完善下这个假的select

刚学习js，模拟了这个假的select，没一点思路，写到目前状态发现根本写不下去，把代码贴上来，希望有牛人帮忙完善。说白了，就是个假的select，只是能键盘的方向键操作。本人菜鸟，代码可能一塌糊涂。望牛人指点。
<!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=utf-8" />
<style>
* { margin:0; padding:0; }
#div1 { border:1px solid #808080; background-color:#EEEEEE; width:200px; cursor:pointer; padding:3px; }
#div1 div { padding:3 3 3 10; }
.div_move { background-color:#CCCCFF; }
.div_move1 { background-color:red; }
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
window.onload = function getDiv(){
var obj_div1 = document.getElementById('div1');
var div1_div = obj_div1.getElementsByTagName('div');
for( var int_i=0; int_i<div1_div.length; int_i++ ){
div1_div[int_i].onclick = function(){
getInnerHTML(this);
}
div1_div[int_i].onmouseover = function(){
div_move(this);
}
div1_div[int_i].onmouseout = function(){
div_out(this);
}
}
}
function getInnerHTML(obj){
document.getElementById('input1').value = obj.innerHTML;
obj.parentNode.style.display = 'none';
}
function div_move(obj){
var obj_div = document.getElementById('div1');
var divs = obj_div.getElementsByTagName('div');
for( var int_i=0; int_i<divs.length; int_i++ ){
if( divs[int_i] == obj ){
divs[int_i].className = 'div_move';
}
else{
divs[int_i].className = '';
}
}
}
function div_out(obj){
var obj_div = document.getElementById('div1');
var divs = obj_div.getElementsByTagName('div');
for( var int_i=0; int_i<divs.length; int_i++ ){
if( divs[int_i].innerHTML == document.getElementById('input1').value ){
divs[int_i].className = 'div_move';
}
else{
divs[int_i].className = '';
}
}
}


function showTable(){
document.getElementById('div1').style.display = '';
document.getElementById('div1').focus();
var input1Top = document.getElementById('input1').offsetTop;
var input1Left = document.getElementById('input1').offsetLeft;
var input1Width = document.getElementById('input1').offsetWidth;
var input1Height = document.getElementById('input1').offsetHeight;
document.getElementById('div1').style.position = 'relative';
//document.getElementById('div1').style.top = input1Top;
document.getElementById('div1').style.left = input1Left;

var obj_selectElement = document.getElementById('input1').value;

if( obj_selectElement == null ){}
else{
var obj_div = document.getElementById('div1');
var divs = obj_div.getElementsByTagName('div');
for( var i=0; i<divs.length; i++ ){
if( divs[i].innerHTML == obj_selectElement ){
divs[i].className = 'div_move';
}
else{
divs[i].className = '';
}
}
}
document.onkeydown = function(event_e){
if( window.event ){
event_e = window.event;
}
var int_keycode = event_e.charCode || event_e.keyCode;
if( int_keycode == '38' ){
var obj_div = document.getElementById('div1');
var divs = obj_div.getElementsByTagName('div');
for( var i=0; i<divs.length; i++ ){
if( divs[i].className == 'div_move' ){
divs[i].className = '';
if( divs[i].previousSibling == null ){
obj_div.lastChild.className = 'div_move';
document.getElementById('input1').value = obj_div.lastChild.innerHTML;
}
else{
divs[i].previousSibling.className = 'div_move';
document.getElementById('input1').value = divs[i].previousSibling.innerHTML;
}
}
}
}
if( int_keycode == '40' ){
var obj_div = document.getElementById('div1');
var divs = obj_div.getElementsByTagName('div');
for( var q=0; q<divs.length; q++ ){
if( divs[q].innerHTML == obj_selectElement ){
divs[q].className == '';
if( divs[q].nextSibling == null ){
obj_div.firstChild.className = 'div_move';
document.getElementById('input1').value = obj_div.firstChild.innerHTML;
}
else{
divs[q].nextSibling.className = 'div_move';
document.getElementById('input1').value = divs[q].nextSibling.innerHTML;
}
}
}
}
if( int_keycode == '13' ){
document.getElementById('div1').style.display = 'none';
}
}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<br /><br /><br /><br /><br /><br />
　　　　　　　　　　　　　　<input type='text' id='input1' readonly='true' onclick='showTable();' />
<img src='http://60.30.26.74/down/1.gif' onclick='showTable();' onmouseover='this.src="http://60.30.26.74/down/2.gif"' onmouseout='this.src="http://60.30.26.74/down/1.gif";' align="absmiddle" />
<div id='div1' onblur='this.style.display="none";' style='display:none;'>
<div>菜单菜单菜单菜单1</div>
<div>菜单菜单菜单菜单2</div>
<div>菜单菜单菜单菜单3</div>
<div>菜单菜单菜单菜单4</div>
<div>菜单菜单菜单菜单5</div>
<div>菜单菜单菜单菜单6</div>
<div>菜单菜单菜单菜单7</div>
<div>菜单菜单菜单菜单8</div>
<div>菜单菜单菜单菜单9</div>
<div>菜单菜单菜单菜单0</div>
</div>
</BODY>
</HTML>

解决方案 »

  1.   

    建议
                <div>菜单菜单菜单菜单1</div>
                <div>菜单菜单菜单菜单2</div>
                <div>菜单菜单菜单菜单3</div>
                <div>菜单菜单菜单菜单4</div>
                <div>菜单菜单菜单菜单5</div>
                <div>菜单菜单菜单菜单6</div>
                <div>菜单菜单菜单菜单7</div>
                <div>菜单菜单菜单菜单8</div>
                <div>菜单菜单菜单菜单9</div>
                <div>菜单菜单菜单菜单0</div>给他们一个divID，这样你以后就好操作了。
    可以看mizz树中的实现。
      

  2.   

    问题是那些菜单都不是固定的数据，都是由后台PHP生成的。
      

  3.   

    后台PHP生成也可以给ID的啊
     <div id='div1'> 菜单菜单菜单菜单1 </div>