|
今天剛剛看到羅亭的許可.
"請勿做商用". 說明: 1.羅亭的可輸入下拉框是個加密版.(變量名,函數(shù)名都被替換成數(shù)字) 2.函數(shù)眾多.比如添加刪除OPTION等被簡化掉了.各位可以參考羅亭的貼子. 總之,這個要小上一點(diǎn).看起來也可能會清楚點(diǎn). 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(); } } |
|
|
