你可以用一个textbox和一个图片来模拟!
解决方案 »
- JS 怎样获取当前剩下的秒数呢???(函数?)
- selected 多选下拉,如何获取值和赋值
- 两个select对象滚动条可以联动吗,有没有办法实现?
- 如何限制字符串长度
- 新手问:JavaScript提交运行onSubmit()后,如何根据条件不提交
- 能在一个iframe中控制打印另一个iframe的内容吗?
- 能实现不被其他帧挡住的下拉菜单,javascript的 100分报酬!!
- 想实现这样一个功能,向各位请教
- 如何获取下拉框中的显示值,急!急!急!
- 当一个frame1中的textbox1中的值变化时,怎样使另一个frmae2中的textbox2中的值跟住变化?
- 年终大盘点(二):最佳技术贴!
- 如何在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>