在javascript写的数组，每次在列表里选其他的选项（<a>）输入框中都会显示数组的最后一项

每次在下拉框里选中任意一个选项点击后，输入框里都只显示数组的最后一项；不知道哪里错了。。感谢

图片说明

 <html>
<head>
<title>
MyPage
</title>
<script>
function showDiv(){
var div = document.getElementById('sel');
div.style.display = "block";
var TeacherName = new Array("张晓梅","张瑞华","张爱武","张立群");
for(var i =0; i<TeacherName.length;i++){
var div1 = document.createElement("div");
div1.setAttribute("id","div-"+i);
div.appendChild(div1);
s = TeacherName[i];
   a = document.createElement("a");
a.setAttribute("id","a-"+i);
a.innerHTML = s;
alert(a.id);
a.setAttribute("href","javascript:getValue('mainTeacher',s)");
div1.appendChild(a);
div.appendChild(div1);
}

}
function hideDiv(){
var div = document.getElementById('sel');
div.style.display="none";
}
function getValue(targetObj,sourceObj){
alert(targetObj);
alert(sourceObj);
document.getElementById(targetObj).value = sourceObj;
hideDiv();
}
</script>
</head>
<body>
<input type='text' id='mainTeacher' class="myTxt" onkeydown="showDiv();" />
<input type="button" value="确定"/>
<div id='sel' class='myDiv' style="left:10px; top:40px; width:150px; height:100px; display:none;">
<!--<div>
<a href="javascript:getValue('txt1','选择一')">选择一</a>
</div>
<div>
<a href="javascript:getValue('txt1','选择二')">选择二</a>
</div>
<div>
<a href="javascript:getValue('txt1','选择三')">选择三</a>
</div>
<div>
<a href="javascript:getValue('txt1','选择四')">选择四</a>
</div>-->
</div>
</body>
</html>

建议F12在JS中debug模式调试一下。


        function showDiv() {
            var div = document.getElementById('sel');
            div.style.display = "block";
            div.innerHTML=''///清空之前添加的
            var TeacherName = new Array("张晓梅", "张瑞华", "张爱武", "张立群");
            for (var i = 0; i < TeacherName.length; i++) {
                var div1 = document.createElement("div");
                div1.setAttribute("id", "div-" + i);
                div.appendChild(div1);
                s = TeacherName[i];
                a = document.createElement("a");
                a.setAttribute("id", "a-" + i);
                a.innerHTML = s;
               // a.onclick = function () { getValue('mainTeacher',this.innerHTML) }//改这样，下面s存储的就是最后的一个值，不是当前循环到的
                //a.setAttribute("href", "javascript:getValue('mainTeacher',s)");//或者改成a.setAttribute("href", "javascript:getValue('mainTeacher','"+s+"')");

                div1.appendChild(a);
                div.appendChild(div1);
            }

        }

 a.setAttribute("href","javascript:getValue('mainTeacher',s)");

你的代码中传入的是字符串s，而不是s的内容。因此你点任何一个选项调用的方法第二个参数都是一样的(循环结束后s的内容为‘张立群’)。
改成下面这样就可以。

 a.setAttribute("href","javascript:getValue('mainTeacher','"+s+"')");

s = TeacherName[i]; s改成 var s; 这样你的 s 就不是全局的了。不然的话你s是全局变量。循环完之后 s已经变成最后一次的值了。这是原因。
别的解决方案我就不说了，楼上有人说了