罗亭的可输入下拉框的解密简化版.


答案：今天刚刚看到罗亭的许可.
"请勿做商用".
说明:
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;
  th
上一个：层不能跨框架（包括TEXTAREA）显示的解决办法
下一个：IE里的探索之浏览器概览
更多图片编程知识: