一个问题紧急！

Question

我仿了一个 select 控件 用iput 和 button  ＋ js 但是在下拉列表 失去焦点以后，怎么让它回收列表或者点击空白处收回列表例：
<STYLE> 
BODY { 
SCROLLBAR-FACE-COLOR: #d80000; 
SCROLLBAR-HIGHLIGHT-COLOR: #0000fc; 
SCROLLBAR-SHADOW-COLOR: #24fc90; 
SCROLLBAR-ARROW-COLOR: #fcfc48; 
SCROLLBAR-TRACK-COLOR: #002400; 
SCROLLBAR-DARKSHADOW-COLOR: #00b448; 
SCROLLBAR-BASE-COLOR: #fc0000 
} 
</STYLE> 
<script  lanuage="JScript"> 
var state;
function  turnit(ss) 
{ 
if  (ss.style.display=="none") 
{ss.style.display=""; 
state="open";
} 
else 
{ss.style.display="none"; 
} 
} 
function sele(tid) 
{ 
bb.style.display='none'; 
text1.value=tid.innerText; 
} 
function over(tid) 
{ 
for (var i=1;i<4;i++) 
{ 
eval('t'+i).className='' 
} 
tid.className='ss' 
} 
function out(tid) 
{ 
if (bb.style.display!='none') 
tid.className='' 
} </script> 
<table width="98" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td width="98" nowrap> 
<input name="text1" type="text" size="10" class=n1 readonly value=请选择 onclick=turnit(bb)><input name="Submit" type="text" class="n2" value="" readonly onclick=turnit(bb) onMouseOut="nobutSelect()"> 
</td> 
</tr> 
<tr> 
<td id=bb style=display:none ><div id="Layer1" style="position:absolute; width:98px; height:100px; overflow: scroll; overflow-x:hidden; z-index: 1;" class="n1" > 
<table width="100%" border="0" cellpadding="0" cellspacing="0" id=tb> 
<tr> 
<td  id=t1 onMouseOver =over(this) onMouseOut =out(this) onclick=sele(this)>选择1</td> 
</tr> 
<tr> 
<td id=t2 onMouseOver =over(this) onMouseOut =out(this) onclick=sele(this)>选择2</td> 
</tr> 
<tr> 
<td id=t3 onMouseOver =over(this) onMouseOut =out(this) onclick=sele(this)>选择3</td> 
</tr> 
</table> 
非常紧急 在线等！ 谢谢

Answer 1

 <input name="text1" type="text" size="10" class="n1" readonly value="请选择" onclick="turnit(bb)" onblur="turnit(bb);">

Answer 2

function turnit(ss) {
//这样可以兼容FF这样的浏览器
            var td = document.getElementById(ss);
            if (td.style.display == "none") {
                td.style.display = "";
                state = "open";
            }
            else {
                td.style.display = "none";
            }
        }
<input name="text1" type="text" size="10" class="n1" readonly value="请选择" onclick="turnit('bb')" onblur="turnit('bb');">

Answer 3

<script type="text/javascript">
        var state;
        function turnit(event, ss) {
            event = event || window.event;
            //阻止事件冒泡
            if (event.stopPropagation) {
                event.stopPropagation();
            } else {
                event.cancelBubble = true;
            }
            var td = document.getElementById(ss);
            if (td.style.display == "none") {
                td.style.display = "";
                state = "open";
            }
            else {
                td.style.display = "none";
            }
        }        document.body.onclick = function() {
            document.getElementById("bb").style.display = "none";
        }        function sele(tid) {
            //bb.style.display = 'none';
            //text1.value = tid.innerText;
            document.getElementById("text1").value = tid.innerHTML;
        }        function over(tid) {
            for (var i = 1; i < 4; i++) {
                eval('t' + i).className = ''
            }
            tid.className = 'ss'
        }        function out(tid) {
            if (bb.style.display != 'none')
                tid.className = ''
        }
    </script>    <table width="98" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td width="98" nowrap>
                <input name="text1" id="text1" type="text" size="10" class="n1" readonly="readonly"
                    value="请选择" onclick="turnit(event,'bb')" />
                <input name="Submit" type="text" class="n2" value="" readonly="readonly" onclick="turnit(bb)"
                    onmouseout="nobutSelect()" />
            </td>
        </tr>
        <tr>
            <td id="bb" style="display: none">
                <div id="Layer1" style="position: absolute; width: 98px; height: 100px; overflow: scroll;
                    overflow-x: hidden; z-index: 1;" class="n1">
                    <table width="100%" border="0" cellpadding="0" cellspacing="0" id="tb">
                        <tr>
                            <td id="t1" onmouseover="over(this)" onmouseout="out(this)" onclick="sele(this)">
                                选择1
                            </td>
                        </tr>
                        <tr>
                            <td id="t2" onmouseover="over(this)" onmouseout="out(this)" onclick="sele(this)">
                                选择2
                            </td>
                        </tr>
                        <tr>
                            <td id="t3" onmouseover="over(this)" onmouseout="out(this)" onclick="sele(this)">
                                选择3
                            </td>
                        </tr>
                    </table>
                </div>
            </td>
        </tr>
    </table>

Answer 4

document.body.onclick  不执行呀 点击页面没有反应呀