IDC资讯中心
今天刚刚看到罗亭的许可.
"请勿做商用".
说明:
1.罗亭的可输入下拉框是个加密版.(变量名,函数名都被替换成数字)
2.函数众多.比如添加删除option等被简化掉了.各位可以参考罗亭的贴子.
总之,这个要小上一点.看起来也可能会清楚点.
test.html
<html>
<head>
<title>compobox</title>
<meta http-equiv=content-type content="text/html; charset=shift_jis">
<!–以外部引用方式–>
<script type="text/javascript" src="combobox.js"></script>
</head>
<body onload="init();"><!– onresize="resetallsize();"这句话不加好象也可以.–>
<form name="form1">
<!–如果不定宽度的话,会有很怪的效果^^–>
<table border="1" width="395">
<tr>
<td width="140">input web address:</td>
<td width="216">
<select id="combobox1" style="position: absolute;
onresize="if (combox1!=null) {combox1.doresize();}"
onchange="if (combox1!=null) {combox1.dochange();}" name="select2">
<!–这句话里的selected似乎不起作用,可能我没看出来–>
<option value=www.51js.com selected>www.51js.com</option>
<option value=www.ccbfu.com>www.ccbfu.com</option>
<option value=www.sina.com.cn>www.sina.com.cn</option>
</select>
</td>
</tr>
<tr>
<td width="140">input web address:</td>
<td height="200" width="216">
<!–如果要建立多个的话可以参考这种做法–>
<select id="combobox2" style="position: absolute"
onresize="if (combox2!=null) {combox2.doresize();}"
onchange="if (combox2!=null) {combox2.dochange();}" name="select">
<option value=www.51js.com selected>www.51js.com</option>
<option value=www.ccbfu.com>www.ccbfu.com</option>
<option value=www.sina.com.cn>www.sina.com.cn</option>
</select>
</td>
</tr>
</table>
<!–提交后可以看到它是如何传递值的–>
<input type="submit" value="submit">
<script>
var combox1,combox2;
function init()
{
combox1 = new combobox("combobox1", "combox1");
combox1.doselectidx(-1);
combox2 = new combobox("combobox2", "combox2");
combox2.doselectidx(-1);
}
</script>
</form>
</body>
</html>
combobox.js
function getleftpostion( theobj )
{
var pos = 0;
while ( theobj != null )
{
pos += theobj.offsetleft;
//get the object which contain theobj.
theobj = theobj.offsetparent;
}
return pos;
}
function gettoppostion( theobj )
{
var pos = 0;
while ( theobj != null )
{
pos += theobj.offsettop;
//get the object which contain theobj.
theobj = theobj.offsetparent;
}
return pos;
}
function checkversion()
{
var isbadversion=true;
var curver=navigator.appversion;
var pos=parseint(curver.indexof("msie"));
if (pos>=1)
{
var intver=parseint(curver.charat(pos+5));
if (intver>=5)
{ isbadversion=false;}
}
if (isbadversion)
{
var msg="this page may not be displayed properly:\n"+
" this product requires microsoft internet explorer 5 or later browser only.";
alert(msg);
}
}
//check the browser version
checkversion();
// the array of comboboies
thearray = new array();
function combobox(objid, objhandler)
{
this.comobj = document.all[objid];
this.comobj.selectedindex = -1;
this.getvalue = getvalue;
this.doresize = doresize;
this.dochange = dochange;
this.losefocus = losefocus;
this.doselectidx = doselectidx;
this.focus = focus;
var strmsg="";
//——————————————————————————————————
// create the text object
//——————————————————————————————————
var txtobjidname = objid + "_text";
if (document.all[txtobjidname] != null)
{
strmsg="the following id: " + txtobjidname +" is used internally by the combo box!\r\n"+
"use of this id in your page may cause malfunction. please use another id for your controls.";
alert(strmsg);
}
var txtinner = "<input type=text id=" + txtobjidname + " name=" + txtobjidname +
" onblur=" + objhandler + ".losefocus() " +
" style=display: none; position: absolute value= >";
this.comobj.insertadjacenthtml("afterend", txtinner);
this.txtobj = document.all[txtobjidname];
//——————————————————————————————————
// end
//——————————————————————————————————
this.beresizing = false;
this.doresize();
thearray[thearray.length] = this;
}
function losefocus()
{
var thecomobj = this.comobj;
var thetxtobj = this.txtobj;
var i;
thecomobj.selectedindex = -1;
if (thetxtobj.value == "")
{ return; }
var optlen = thecomobj.options.length;
for (i=0; i<optlen; i++)
{
var comval = thecomobj.options[i].text;
var txtval = thetxtobj.value;
if (comval == txtval)
{ thecomobj.selectedindex = i;
return;
}
}
}
function doresize()
{
if (!this.beresizing)
{
this.beresizing = true;
this.txtobj.style.display="none";
this.comobj.style.position="static";
this.txtobj.style.posleft = getleftpostion(this.comobj);
this.txtobj.style.postop = gettoppostion(this.comobj) + 1;
this.txtobj.style.poswidth = this.comobj.offsetwidth – 16;
this.txtobj.style.posheight = this.comobj.offsetheight;
this.comobj.style.position ="absolute";
this.comobj.style.posleft = this.txtobj.style.posleft;
this.comobj.style.postop = this.txtobj.style.postop;
this.offwidth = this.comobj.offsetwidth;
var strrect = "rect(0 "+(this.comobj.offsetwidth)+" "+ this.comobj.offsetheight +
" "+(this.txtobj.style.poswidth – 2 )+")";
this.comobj.style.clip = strrect;
this.txtobj.style.display="";
this.beresizing = false;
}
}
function dochange()
{
var idx = this.comobj.selectedindex;
var opt = this.comobj.options[idx];
this.txtobj.value = opt.text;
this.txtobj.focus();
this.txtobj.select();
this.comobj.selectedindex=-1;
}
function getvalue()
{ return this.txtobj.value; }
function doselectidx(i)
{
var optlen = this.comobj.options.length;
if ((i >=0) && (i < optlen))
{ this.comobj.selectedindex = i;
this.txtobj.value = this.comobj.options[i].text;
return;
}
this.txtobj.value = "";
}
function focus()
{ this.txtobj.focus(); }
/* resize all combobox when window be resized */
function resetallsize()
{
var i;
for (i=0; i < thearray.length; i++)
{
thearray[i].doresize();
}
}
