弹出式选择！

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style>
.selectOff
{
    BORDER-RIGHT: medium none;
    BORDER-TOP: medium none;
    FONT-SIZE: 12px;
    OVERFLOW: hidden;
    BORDER-LEFT: medium none;
    CURSOR: default;
    BORDER-BOTTOM: #aaaaaa 1px solid;
    BACKGROUND-COLOR: transparent
}
.selectOn
{
    BORDER-RIGHT: 1px solid;
    BORDER-TOP: 1px solid;
    FONT-SIZE: 12px;
    Z-INDEX: 1;
    LEFT: -1000px;
    VISIBILITY: hidden;
    OVERFLOW: hidden;
    BORDER-LEFT: 1px solid;
    WIDTH: 0px;
    CURSOR: default;
    BORDER-BOTTOM: 1px solid;
    FONT-FAMILY: ??¨??,Helvetica,Arial,Sans-Serif;
    POSITION: absolute;
    TOP: -1000px;
    BACKGROUND-COLOR: #f0f0f0
}
.ednonedisable
{
    BORDER-RIGHT: medium none;
    BORDER-TOP: medium none;
    FONT-SIZE: 12px;
    BORDER-LEFT: medium none;
    COLOR: #777777;
    BORDER-BOTTOM: medium none;
    BACKGROUND-COLOR: transparent
}
.selectItem
{
    FONT-SIZE: 12px;
    WIDTH: 100%;
    LINE-HEIGHT: 16px
}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
selectObjs = false;
curSelectObj = null;
window.onresize=TryAdjustSelect;
setTimeout("SetOnFocusToHideSelect();",500);
function SetOnFocusToHideSelect()
{
var obj;
var i;
if (document.all){
document.body.onfocus = TryHideSelect;
obj = document.all.tags("TABLE");
for (i=0;i<obj.length;i++){
obj.item(i).onfocus = TryHideSelect;
}
obj = document.all.tags("TD");
for (i=0;i<obj.length;i++){
obj.item(i).onfocus = TryHideSelect;
}
obj = document.all.tags("A");
for (i=0;i<obj.length;i++){
obj.item(i).onfocus = TryHideSelect;
}
}
}function RegisterSelect(selobj)
{
if (!selectObjs)
selectObjs = new Array();
selectObjs[selectObjs.length] = selobj;
}function TryAdjustSelect()
{
if (selectObjs){
for (i=0;i<selectObjs.length;i++)
if (selectObjs[i].visible){
CalcSelectPosition(selectObjs[i]);
}
}
}function TSelectObject(formVarH,formVarV,idOn,idOff,selectedIndex,nItems,onselectFunc)
{
this.formVarH = formVarH;
this.formVarV = formVarV;
this.idOn = idOn;
this.idOff = idOff;
this.selectedIndex = selectedIndex;
this.index0 = selectedIndex;
this.visible = false;
this.nItems = nItems;
this.onselect = onselectFunc;
return this;
}function ToggleSelect(selobj)
{
if (selobj.visible)
HideSelect(selobj);
else
ShowSelect(selobj);
return;
}function HighlightOption(selobj,i)
{
NormalOption(selobj,selobj.selectedIndex);
var obj = document.all[selobj.idOn+"_"+i];
obj.style.backgroundColor = "#113399";
obj.style.color = "#ffffff";
}function NormalOption(selobj,i)
{
var obj = document.all[selobj.idOn+"_"+i];
obj.style.backgroundColor = "#f0f0f0";
obj.style.color = "#000";
}function OptionClicked(selobj,idx,val)
{
var obj = document.all[selobj.idOn+"_"+idx];
var vstr = obj.innerText;
vstr = vstr.replace(/^( )+/,"");
var formObj=null; formObj = FindFormByVarName(selobj.formVarH);
if (formObj!=null){
eval("formObj."+selobj.formVarV+".value = vstr;");
eval("formObj."+selobj.formVarH+".value = "+val+";");
}
selobj.selectedIndex = idx;
HideSelect(selobj);
if (selobj.onselect!=''){
eval(selobj.onselect+"("+val+");");
}
}function CalcSelectPosition(selobj)
{
if (document.all){
var obj = document.all[selobj.idOff];
var left = 0;
var top = 0;
for (; obj!=document.body; obj=obj.offsetParent){
left += obj.offsetLeft;
top  += obj.offsetTop;
}
obj = document.all[selobj.idOn].style;
obj.pixelLeft = left;
obj.pixelTop = top+document.all[selobj.idOff].offsetHeight+1;
obj.pixelWidth = document.all[selobj.idOff].offsetWidth;
if (selobj.nItems<=10){
obj.pixelHeight = selobj.nItems*16+2;
obj.overflow = "visible";
}
else{
obj.pixelHeight = 10*16+2;
obj.overflow = "auto";
}
}
}function PreShowSelect(selobj)
{
obj = document.all[selobj.idOn].style;
obj.overflow = "hidden";
}function ShowSelect(selobj)
{
if (document.all){
if (curSelectObj!=null)
HideSelect(curSelectObj);
selobj.visible = true;
document.all[selobj.idOn].style.visibility="visible";
CalcSelectPosition(selobj);
// document.all[selobj.idOn].focus();
// document.all[selobj.idOn+"_"+selobj.selectedIndex].scrollIntoView();
HighlightOption(selobj,selobj.selectedIndex);
curSelectObj = selobj;
}
}function HideSelect(selobj)
{
if (document.all){
obj = document.all[selobj.idOn].style;
obj.visibility="hidden";
selobj.visible = false;
curSelectObj = null;
}
}function DelayHideSelect(objname)
{
setTimeout("HideSelect("+objname+");",200);
}function TryHideSelect()
{
if (curSelectObj!=null)
HideSelect(curSelectObj);
}function EscapeHTMLString(str)
{
str  = str+"";
str = str.replace(/&nbsp;/g," ");
str = str.replace(/&/g,"&amp;");
str = str.replace(/</g,"&lt;");
str = str.replace(/>/g,"&gt;");
str = str.replace(/"/g,"&quot;");
str = str.replace(/ /g,"&nbsp;");
return str;
}function GenSelItem(num,k,v)
{
var sobj = "selobj_"+tmp_select_vname;
var id = "selon_"+tmp_select_vname;
v = EscapeHTMLString(v);
  document.write("<DIV CLASS=\"selectItem\" ID=\""+id+"_"+num+"\" ONCLICK=\"OptionClicked("+sobj+","+num+",'"+k+"');\" ONMOUSEOVER=\"HighlightOption("+sobj+","+num+");\" ONMOUSEOUT=\"NormalOption("+sobj+","+num+");\">"+v+"</DIV>");
}function FindFormByVarName(vname)
{
for (i=0;i<document.forms.length;i++){
if (document.forms[i].all[vname]!=null)
return document.forms[i];
}
return null;
}function FindVarByName(vname)
{
var obj;
for (i=0;i<document.forms.length;i++){
obj = document.forms[i].all.item(vname);
if (obj!=null){
if (obj.length>0)
return obj.item(0);
else
return obj;
}
}
return null;
}
//-->
</SCRIPT>
</HEAD><BODY>
<FORM METHOD=POST name=thisForm ACTION="">
<TABLE width=100>
<TR>
<TD><div ID="seloff_emp_cal_start_month" CLASS="selectOff" ONCLICK="ToggleSelect(selobj_emp_cal_start_month);">
<table BORDER="0" CELLSPACING="0" CELLPADDING="0">
  <tr>
<td><input CLASS="ednonedisable" READONLY STYLE="cursor:default;" NAME="selvarV_emp_cal_start_month" VALUE="1" SIZE="20"></td>
<td WIDTH="1%"><img src="../image/images/down_arrow.gif" STYLE="cusor:hand;" BORDER="0" width="15" height="6"></td>
  </tr>
</table>
  </div>
  <div ID="selon_emp_cal_start_month" CLASS="selectOn" ONBLUR="DelayHideSelect('selobj_emp_cal_start_month');">
<script LANGUAGE="javascript">tmp_select_vname='emp_cal_start_month';GenSelItem(0,0,' ');GenSelItem(1,1,'1');GenSelItem(2,2,'2');GenSelItem(3,3,'3');GenSelItem(4,4,'4');GenSelItem(5,5,'5');GenSelItem(6,6,'6');GenSelItem(7,7,'7');GenSelItem(8,8,'8');GenSelItem(9,9,'9');GenSelItem(10,10,'10');GenSelItem(11,11,'11');GenSelItem(12,12,'12');</script>
  </div>
  <input TYPE="HIDDEN" NAME="emp_cal_start_month" VALUE="1">
  <script>
  selobj_emp_cal_start_month=new TSelectObject('emp_cal_start_month','selvarV_emp_cal_start_month','selon_emp_cal_start_month','seloff_emp_cal_start_month',2,13,'');
RegisterSelect(selobj_emp_cal_start_month);
</script></TD>
</TR>
</TABLE></FORM>
</BODY>
</HTML>