扫一扫
分享文章到微信
扫一扫
关注官方公众号
至顶头条
今天刚刚看到罗亭的许可.
"请勿做商用".
说明:
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浏览地址：
如果您非常迫切的想了解IT领域最新产品与技术信息，那么订阅至顶网技术邮件将是您的最佳途径之一。
现场直击｜2021世界人工智能大会
直击5G创新地带，就在2021MWC上海
5G已至 转型当时——服务提供商如何把握转型的绝佳时机
寻找自己的Flag
华为开发者大会2020（Cloud）- 科技行者
京公网安备 11010802021500号