|
前面講了要做可編輯且指定select的無(wú)限聯(lián)動(dòng)下拉菜單，我先寫個(gè)可編輯的下拉框類，那個(gè)菜單在下篇中寫。
網(wǎng)上的可編輯下拉框，用2個(gè)以上就有位置顯示問(wèn)題產(chǎn)生，所以我修正了，寫了下面的東西。 說(shuō)白了，可編輯下拉框就是在select上面放一個(gè)input，下面是一個(gè)可編輯下拉框類（combox.js）： /** *可編輯下拉框?qū)ο箢?br> * *可編輯下拉框，其實(shí)就是在下拉框的上面放了個(gè)無(wú)邊框的輸入框，在輸入框輸數(shù)據(jù)時(shí)，下拉框自動(dòng)定位, *下拉框選中某項(xiàng)時(shí)，下拉框的值賦給輸入框，從而產(chǎn)生錯(cuò)覺(jué) * *@author zxub 2005-8-22 */ function combox(_inpuObjName,_controlSelectName) { //生成的輸入框?qū)ο竺Q this.inpuObjName=_inpuObjName; //生成的輸入框?qū)ο?br> this.inputbox=null; //原來(lái)的下拉框?qū)ο?br> this.controlSelect=document.getElementById(_controlSelectName); //初始化對(duì)象 //_comboxObj:combox對(duì)象，須指向自己 this.init=function(_comboxObj) { this.inputbox=document.createElement("input"); this.inputbox.id=this.inpuObjName; this.inputbox.comboxObj=_comboxObj; this.inputbox.onchange=function() { this.comboxObj.find(); } with(this.inputbox.style) { width=this.controlSelect.offsetWidth-16; height=this.controlSelect.offsetHeight; } this.controlSelect.insertAdjacentElement("beforeBegin",this.inputbox); _span=document.createElement("span"); _span.style.width=18; this.controlSelect.insertAdjacentElement("beforeBegin",_span); _span.appendChild(this.controlSelect); _container=document.createElement("span"); this.inputbox.insertAdjacentElement("beforeBegin",_container); _container.appendChild(this.inputbox); _container.appendChild(_span); _container.style.width=this.inputbox.offsetWidth+18; _width=this.controlSelect.offsetWidth-18; with (this.controlSelect.style) { margin="0 0 0 -"+_width; } this.controlSelect.comboxObj=_comboxObj; this.controlSelect.onchange=function() { this.comboxObj.change(); } this.change(); } //當(dāng)搜索到輸入框的值時(shí),下拉框自動(dòng)定位/ this.find=function() { with (this.controlSelect) { for(i=0;i<options.length;i++) if(options[i].text.indexOf(this.inputbox.value)==0) { selectedIndex=i; this.change(); break; } } } //定義下拉框的onchange事件 this.change=function() { this.inputbox.value=this.controlSelect.options[this.controlSelect.selectedIndex].text; with (this.inputbox) { select(); focus(); } } } /** * 定位函數(shù)，獲取控件絕對(duì)坐標(biāo) */ function getLeftPos(e) { var left=e.offsetLeft; while (e=e.offsetParent) { left+=e.offsetLeft; } return left; } function getTopPos(e) { var top=e.offsetTop; while (e=e.offsetParent) { top+=e.offsetTop; } return top; } 附上測(cè)試頁(yè)面test.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=""> <script language="javascript" src="combox.js"></script> </HEAD> <BODY> <table border="1" style="border-collapse:collapse "> <tr> <td width="300"><select name=test1> <option value="可編輯下拉框1" selected>可編輯下拉框1</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <INPUT TYPE="button" value="獲取編輯框1的值" onclick="alert(document.getElementById(‘username‘).value)"> </td> <td width="109"><select name=test2> <option value="可編輯下拉框2">可編輯下拉框25555555</option> <option value="1">4</option> <option value="2" selected>5</option> <option value="3">6</option> </select> </td> <td width="343"> <INPUT TYPE="button" value="獲取編輯框2的值" onclick="alert(document.getElementById(‘password‘).value)"> </td> </tr> </table> <script language="javascript"> var a=new combox("username","test1"); //參數(shù)1為新生成輸入框的名稱 //參數(shù)2為原來(lái)的select對(duì)象名稱 a.init(a); var b=new combox("password","test2"); b.init(b); </script> </BODY> </HTML> ok，下篇我講可編輯且指定select的無(wú)限聯(lián)動(dòng)下拉菜單的制作。 |
|
|
