可編輯的下拉框類【原創(chuàng)】

WindySky 2007-01-23

展開全文

前面講了要做可編輯且指定select的無限聯(lián)動下拉菜單，我先寫個可編輯的下拉框類，那個菜單在下篇中寫。
　　網(wǎng)上的可編輯下拉框，用2個以上就有位置顯示問題產(chǎn)生，所以我修正了，寫了下面的東西。
　　說白了，可編輯下拉框就是在select上面放一個input，下面是一個可編輯下拉框類（combox.js）：
/**
*可編輯下拉框?qū)ο箢?br> *
*可編輯下拉框，其實就是在下拉框的上面放了個無邊框的輸入框，在輸入框輸數(shù)據(jù)時，下拉框自動定位,
*下拉框選中某項時，下拉框的值賦給輸入框，從而產(chǎn)生錯覺
*
*@author zxub 2005-8-22
*/
function combox(_inpuObjName,_controlSelectName)
{
    //生成的輸入框?qū)ο竺Q
    this.inpuObjName=_inpuObjName;
//生成的輸入框?qū)ο?br> this.inputbox=null;
    //原來的下拉框?qū)ο?br>    this.controlSelect=document.getElementById(_controlSelectName);

    //初始化對象
//_comboxObj:combox對象，須指向自己
    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();
    }
    //當搜索到輸入框的值時,下拉框自動定位/
    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ù)，獲取控件絕對坐標
*/
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;
}　　

　　附上測試頁面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為原來的select對象名稱
a.init(a);
var b=new combox("password","test2");
b.init(b);
</script>
</BODY>
</HTML>
　　ok，下篇我講可編輯且指定select的無限聯(lián)動下拉菜單的制作。