如何改变下拉列表框select的矩形显示效果为下划线加一个箭头的形式?急急!!! 你可以用一个textbox和一个图片来模拟! 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 to flyycyu(fly) :那下拉的内容怎么出来? 用一个text和一个select组合实现,控制text的样式为一条线,然后让select的打下为只显示箭头,如下:<html><head><title>ListBox</title><style type="text/css"><!--.t { border-top-width: 0px; border-right-width: 0px; border-bottom-width: 1px; border-left-width: 0px; border-bottom-color: #000000;}--></style></head><body><select name="select"style="position:absolute; left: 10px; top: 10px; width: 120px; height: 18px; clip: rect(0 120 18 100)" id="select" onchange="textfield.value=select.value;textfield.select()"> <option value="aaaaaaaa">aaaaaaaa</option> <option value="bbbbbbbb">bbbbbbbb</option> <option value="cccccccc">cccccccc</option></select><input name="textfield" type="text" class="t" style="position:absolute; left: 10px; top: 10px; width: 100px; height: 20px"></body></html> 或者你用clip把select的右面剪裁掉!再用图片补上! 谢谢 beyond_xiruo(希偌) ,美中不足的是:三角箭头可否去掉它的背景矩形(突起来,很难看),只留一个三脚▲? 给你一个,把down_arrow.gif图片换成箭头的就可以了<!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(/ /g," "); str = str.replace(/&/g,"&"); str = str.replace(/</g,"<"); str = str.replace(/>/g,">"); str = str.replace(/"/g,"""); str = str.replace(/ /g," "); 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> to flyycyu(fly) :谢谢你!你说的就是剪掉小箭头吗?可具体怎么写,你可以给一些代码参考么?我是行外人。 刷新真快!谢谢gzh_seagull(不可) ,好长的代码,全都需要吗?我试试看。 http://lucky.myrice.com/temp/combobox.htm修改即可 <!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=""></HEAD><BODY><select style="width:100px;height:20px"> <option>1</select><select style="position:absolute;width:100px;height:20px;clip:rect(0 80 20 0)"> <option>2</select></BODY></HTML> to flyycyu(fly) :把你的代码和beyond_xiruo(希偌) 的代码结合起来,整个select被剪掉了,这样下拉内容就出不来了。to gzh_seagull(不可) :代码有错,可是太长,不知道怎么改,你的这段代码很经典的,我看过,有一家公司的程序页面用的就是这个,但是有错,“借”不过来。 to : yundanfengqing(云淡风轻) 什么错误提示 触发下拉内容的出现是在div中,div把textbox和img都报含了,所以不管点textbox还是img都可以触发。 to gzh_seagull(不可) :错误为TSelectObject未定义。将你的代码存成一个.htm文件,打开就出错了。谢谢! 我是在测试文件中完全考下来的,不会有错,你看看是不是有一些多余的空格,看看定义和调用TSelectObject的代码附近的代码 拜托!用不着他那么麻烦!你只要剪掉部分!剪掉的部分你用一个图片替代!点击该图片的时候触发select的click事件! <style>.arrow { font-family: Webdings; font: 9pt; color: blue; text-align: center; cursor: hand; background: white;}.seltxt{border-left:0;border-right:0;border-top:0;border-bottom:1 solid #000000;}</style><script>str="";mywidth=0;function showdiv(w){document.all.mysel.style.display="none";str="<input type=text class=seltxt style='width:"+w+";' readOnly onclick=showlist() value="+document.all.mysel.options[document.all.mysel.selectedIndex].text+">";liststr="<table style='border:1 solid #000000;' width="+w+" cellspacing=0 cellpadding=0>";for(i=0;i<document.all.mysel.options.length;i++)liststr+="<tr><td style='font-size:10pt' onmouseover=myover() onmouseout=myout() onclick=myclick("+i+")>"+document.all.mysel.options[i].text+" </td></tr>";liststr+="</table>";likesel.innerHTML=str;mywidth=w;}function showlist(){if(likesel.innerHTML.indexOf("TABLE")==-1)likesel.innerHTML+=liststr;}function myover(){event.srcElement.style.cursor="default";event.srcElement.style.color="white";event.srcElement.style.background="darkblue";}function myout(){event.srcElement.style.color="";event.srcElement.style.background="";}function myclick(j){document.all.mysel.selectedIndex=j;str="<input type=text class=seltxt style='width:"+mywidth+";' readOnly onclick=showlist() value="+document.all.mysel.options[document.all.mysel.selectedIndex].text+">";likesel.innerHTML=str;document.all.arrow.disabled=false;}</script><body onload="showdiv(mysel.offsetWidth)"><select name=mysel><option value=11 selected>1111111<option value=12>111112<option value=13>1111111113</select><table border=0><tr><td><span id=likesel></span></td><td valign=top><span id=arrow class=arrow onclick=showlist()>6</span></td></tr></table> 大家试试 seabell(百合心) 的代码。真棒!2002年岁末,在各位的热心帮助下,问题圆满结束。现结贴给分,祝大家元旦快乐,来年技术更上一层楼! 各位牛人帮忙看看哪里出错了 如何用js获取系统字体 进来帮写几句代码 谁能推荐个JAVASCRIPT视频教程 iframe 急 用过ext-1.0.1的朋友进来指点一下//谢啦 看不明白的问题,可能属于js面向对象方面,在ajax里用的 javascript连接数据库页为什么打开时总弹出:此面正在访问其它域的数据,你允许这样做吗?如何出掉这个窗口不弹出呢?在线等,解决就结帐 简单问题散分 求教 clearTimeout无法清除定时器问题 年终大盘点(二):最佳技术贴! 如何在TABLE中动态增加或删除行?
<html>
<head>
<title>ListBox</title>
<style type="text/css">
<!--
.t {
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 1px;
border-left-width: 0px;
border-bottom-color: #000000;
}
-->
</style>
</head>
<body>
<select name="select"style="position:absolute; left: 10px; top: 10px; width: 120px; height: 18px; clip: rect(0 120 18 100)" id="select" onchange="textfield.value=select.value;textfield.select()">
<option value="aaaaaaaa">aaaaaaaa</option>
<option value="bbbbbbbb">bbbbbbbb</option>
<option value="cccccccc">cccccccc</option>
</select>
<input name="textfield" type="text" class="t" style="position:absolute; left: 10px; top: 10px; width: 100px; height: 20px">
</body>
</html>
再用图片补上!
<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(/ /g," ");
str = str.replace(/&/g,"&");
str = str.replace(/</g,"<");
str = str.replace(/>/g,">");
str = str.replace(/"/g,""");
str = str.replace(/ /g," ");
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>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD><BODY>
<select style="width:100px;height:20px">
<option>1
</select><select style="position:absolute;width:100px;height:20px;clip:rect(0 80 20 0)">
<option>2
</select></BODY>
</HTML>
什么错误提示
你只要剪掉部分!剪掉的
部分你用一个图片替代!
点击该图片的时候触发select的
click事件!
.arrow {
font-family: Webdings;
font: 9pt;
color: blue;
text-align: center;
cursor: hand;
background: white;
}
.seltxt{
border-left:0;
border-right:0;
border-top:0;
border-bottom:1 solid #000000;
}
</style>
<script>
str="";
mywidth=0;
function showdiv(w)
{
document.all.mysel.style.display="none";
str="<input type=text class=seltxt style='width:"+w+";' readOnly onclick=showlist() value="+document.all.mysel.options[document.all.mysel.selectedIndex].text+">";
liststr="<table style='border:1 solid #000000;' width="+w+" cellspacing=0 cellpadding=0>";
for(i=0;i<document.all.mysel.options.length;i++)
liststr+="<tr><td style='font-size:10pt' onmouseover=myover() onmouseout=myout() onclick=myclick("+i+")>"+document.all.mysel.options[i].text+" </td></tr>";
liststr+="</table>";
likesel.innerHTML=str;
mywidth=w;
}
function showlist()
{
if(likesel.innerHTML.indexOf("TABLE")==-1)
likesel.innerHTML+=liststr;
}
function myover()
{
event.srcElement.style.cursor="default";
event.srcElement.style.color="white";
event.srcElement.style.background="darkblue";
}
function myout()
{
event.srcElement.style.color="";
event.srcElement.style.background="";
}
function myclick(j)
{
document.all.mysel.selectedIndex=j;
str="<input type=text class=seltxt style='width:"+mywidth+";' readOnly onclick=showlist() value="+document.all.mysel.options[document.all.mysel.selectedIndex].text+">";
likesel.innerHTML=str;
document.all.arrow.disabled=false;
}
</script>
<body onload="showdiv(mysel.offsetWidth)">
<select name=mysel>
<option value=11 selected>1111111
<option value=12>111112
<option value=13>1111111113
</select>
<table border=0><tr><td><span id=likesel></span></td><td valign=top><span id=arrow class=arrow onclick=showlist()>6</span></td></tr></table>