古墓丽影崛起白金:可编辑的下拉框类【原创】

来源：百度文库编辑：偶看新闻时间：2024/04/29 23:51:18

前面讲了要做可编辑且指定select的无限联动下拉菜单，我先写个可编辑的下拉框类，那个菜单在下篇中写。
　　网上的可编辑下拉框，用2个以上就有位置显示问题产生，所以我修正了，写了下面的东西。
　　说白了，可编辑下拉框就是在select上面放一个input，下面是一个可编辑下拉框类（combox.js）：
/**
*可编辑下拉框对象类
*
*可编辑下拉框，其实就是在下拉框的上面放了个无边框的输入框，在输入框输数据时，下拉框自动定位,
*下拉框选中某项时，下拉框的值赋给输入框，从而产生错觉
*
*@author zxub 2005-8-22
*/
function combox(_inpuObjName,_controlSelectName)
{
    //生成的输入框对象名称
    this.inpuObjName=_inpuObjName;
//生成的输入框对象
this.inputbox=null;
    //原来的下拉框对象
    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                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();
        }
    }
}
/**
* 定位函数，获取控件绝对坐标
*/
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：

New Document

　　ok，下篇我讲可编辑且指定select的无限联动下拉菜单的制作。

vb中可编辑的下拉框怎么做可编辑的GHOST 编辑Dreamweaver的ASP.NET下拉列表的问题 VB中COMBO下拉内容的变更（不是编辑）在“发送到”的下拉框里为什么没有可移动磁盘的显示？ “发送到”的下拉框下拉框的一些问题清除下拉框的地址 ASP 下拉选择框如何实现可输入 Dreamweaver的删除可编辑区域求可编辑mpg视频文件的处理软件为什么有的网页的文件下拉菜单中没有使用FRONTPAGE编辑选项？如何添加？ 3DMAX中，可编辑网络与可编辑多边形的区别求两级下拉框的js代码@@@!!! 删除搜索栏的下拉框如何删除下拉框的纪录？？下拉框的HTML源代码是什么？为什么输入框的下拉表不见了有关html下拉框的一个属性？ [求助]一个关于下拉框的问题 asp.net 下拉列表框的问题 (16)在Word2000编辑状态下,给当前打开的文档加上页码,应使用的下拉菜单是 5) 在Word2000编辑状态下,可以进行"拼写和语法"检查的选项在【】下拉菜单中打开WINRAR找到游戏主目录下的we9le注册表文件,“编辑”，点击此注册表文件,出现下拉菜单后,点

古墓丽影崛起 白金:可编辑的下拉框类【原创】

古墓丽影崛起白金:可编辑的下拉框类【原创】