请问 下拉框 能不能实现 可以下位选择又可以直接编写内容 ？？？？？？？？？

<body onload="comboBox()">
<form name=form1>
<select id="MeizzComboBoxID">
  <option>combo box</option>
  <option value="11">疏影横斜水清浅</option>
  <option value="22">暗香浮动月黄昏</option>
  <option value="33">梅须逊雪三分白</option>
  <option value="44">雪却输梅一段香</option>
  <option value="55">梅花香自苦寒来</option>
</select>
</form>
<SCRIPT LANGUAGE="JavaScript"><!--
function comboBox()
{
  combox  = new MeizzComboBox();
}
function MeizzComboBox()
{ //作者: meizz(梅花雪) [email protected]
  this.object   = getObjectById("MeizzComboBoxID");
  this.input    = document.createElement("input");
  this.div      = document.createElement("div");
  document.body.appendChild(this.input);
  document.body.appendChild(this.div);
  this.SS       = this.object.style;
  this.IS       = this.input.style;
  this.DS       = this.div.style;  this.IS.fontSize  = this.SS.fontSize  = this.DS.fontSize  = "12px";
  this.IS.position  = this.SS.position  = this.DS.position  = "absolute";
  this.top          = getObjectTop(this.object);
  this.left         = getObjectLeft(this.object);
  this.width        = this.object.clientWidth;
  this.height       = this.object.clientHeight;
  this.DS.border    = "1px solid #000000";
  this.DS.display   = "none";
  this.DS.color     = "#000000";
  this.DS.overflow  = "auto";
  this.DS.overflowX = "hidden";
  this.DS.padding   = "2 0 8 0";
  this.IS.cursor    = "default";
  this.IS.borderRight = "0px";
  this.DS.backgroundColor = "#FFFFFF";  this.IS.top       = this.top;
  this.DS.top       = this.top + this.height;
  this.IS.left      = this.DS.left = this.left;
  this.IS.width     = this.width-18;
  this.DS.width     = this.width;
  this.SS.clip      = "rect(0 "+ this.width +" "+ this.height +" "+ this.IS.width +")";  this.inputIndex   = this.object.selectedIndex;
  this.input.value  = this.object.options[this.object.selectedIndex].text;
  this.inputValue   = this.object.options[this.object.selectedIndex].value;  this.candidateValue   = "";    //候选条目的选中项的 value
  this.candidateText    = "";    //候选条目的选中项的 text
  this.candidateFocus   = null;  //候选项的当前焦点项
  this.divIndex         = -1;    //候选项的当前焦点项的索引值
  this.clientInput      = "";    //该变量用来记录用户的输入内容
  this.candidateSelect  = false; //判断当前是否正在选择候选
  this.candidateHeight  = 118;   //候选条显示的高度值  this.object.onchange  = comboxSelectChange;
  this.object.onclick   = comboxSelectChange;
  this.input.onblur     = comboxInputBlur;
  this.input.onkeydown  = comboxInputKeyDown;
  this.div.onscroll     = comboxDivScrolling;
  this.div.onmousedown  = comboxDivScrolling;
  this.div.onblur       = comboxDivHidden;
} var combox;
function comboxDivScrolling(){combox.candidateSelect= true;}
function String.prototype.Trim() {return this.replace(/(^\s*)|(\s*$)/g,"");}
function getObjectById(id)
{
  if (arguments.length == 0) return null;
  /*@cc_on @*/ /*@if (@_jscript_version>=3) return document.all(id); @end @*/
  try{return document.getElementById(id);}
  catch(e){return eval(id);}
}
function getObjectLeft(e)
{
   var l=e.offsetLeft; while(e=e.offsetParent) l += e.offsetLeft; return l;
}
function getObjectTop(e)
{
   var t=e.offsetTop;  while(e=e.offsetParent) t += e.offsetTop;  return t;
}
function setComboxClip()
{
  combox.width    = combox.object.clientWidth;
  combox.IS.width = combox.width-18;
  combox.DS.width = combox.width;
  combox.SS.clip  = "rect(0 "+ combox.width +" "+ combox.height +" "+ combox.IS.width +")";
  combox.SS.left  = combox.left + 1; //这个变态 select 的 clip 属性, 一定要 select 重载才发生作用
  setTimeout("combox.SS.left  = combox.left;");
}
function comboxSelectChange()
{
  combox.inputIndex   = combox.object.selectedIndex;
  combox.input.value  = combox.object.options[combox.object.selectedIndex].text;
  combox.inputValue   = combox.object.options[combox.object.selectedIndex].value;
  combox.input.select();
}
function comboxInputBlur()
{
  var a = combox.object.options, bb=true;
  for(var i=0; i<a.length; i++)
  {
    if(combox.input.value.Trim() == a[i].text){bb = false; break;}
  }

解决方案 »

  1.   

    if(combox.input.value.Trim() != "" && bb && !combox.candidateSelect)
      {
        combox.inputValue = combox.clientInput;
        combox.inputIndex = a.length;
        a.add(new Option(combox.clientInput, combox.clientInput));
        combox.object.options[combox.inputIndex].selected = true;
        setTimeout("setComboxClip()");
      }
      if(!combox.candidateSelect) comboxDivHidden();
    }
    function comboxDivMouseover(obj)
    {
      var e = obj ? obj : window.event.srcElement;
      e.style.background = "highlight";
      e.style.color      = "highlighttext";
      combox.candidateSelect= true;
      for(var i=0; i<combox.div.children.length; i++)
      if(combox.div.children[i] == e) combox.divIndex = i;
      combox.candidateFocus = e;
      combox.inputIndex     = parseInt(e.id.substr(17));
      combox.candidateText  = combox.object.options[combox.inputIndex].text;
      combox.candidateValue = combox.object.options[combox.inputIndex].value;
    }
    function comboxDivMouseout(obj)
    {
      var e = obj ? obj : window.event.srcElement;
      e.style.background = "#FFFFFF";
      e.style.color      = "#000000";
      combox.candidateSelect  = false;
      combox.candidateFocus   = null;
      combox.candidateValue   = "";
      combox.candidateText    = "";
    }
    function comboxDivClick()
    {
      if(combox.candidateSelect)
      {
        combox.input.value = combox.candidateText;
        combox.inputValue  = combox.candidateValue;
        combox.object.options[combox.inputIndex].selected = true;
        combox.input.select();
        comboxDivHidden();
      }
    }
    function comboxDivHidden()
    {
      for(var i=combox.div.children.length-1; i>=0; i--)
      combox.div.removeChild(combox.div.children[i]);
      combox.candidateSelect  = false;
      combox.candidateFocus   = null;
      combox.candidateValue   = "";
      combox.candidateText    = "";
      combox.divIndex         = -1;
      combox.DS.height        = 0;
      combox.DS.display       = "none";
    }
    function comboxInputKeyDown()
    {
      switch(window.event.keyCode)
      {
        case 40 : comboxDivArrow(40); break;
        case 38 : comboxDivArrow(38); break;
        case 13 : comboxDivClick(combox.candidateFocus); break;
        default : setTimeout("combox.clientInput=combox.input.value; comboxDivChildren()"); break;
      }
    }
    function comboxDivChildren()
    {
      var s = combox.input.value, d = null, a = combox.object.options;
      var divstyle = "font-size: 12px; padding: 2 1 0 2; color: #000000; cursor: default";
      var sameness = false;
      comboxDivHidden();
      if(s != "")
      {
        for(var i=0; i<a.length; i++)
        {
          if(a[i].text.Trim().indexOf(s) == 0)
          {
            if(a[i].text.Trim() == s) sameness = true;        d = document.createElement("div");
            d.style.cssText = divstyle;
            d.id            = "comboxDivChildren"+ i;
            d.innerText     = a[i].text;
            d.onclick       = comboxDivClick;
            d.onmouseover   = comboxDivMouseover;
            d.onmouseout    = comboxDivMouseout;
            combox.div.appendChild(d);
            d = null;
          }
        }
        if(combox.div.children.length > 0 && !(sameness && combox.div.children.length==1))
        combox.DS.display = "";
        if(combox.div.clientHeight > combox.candidateHeight) combox.DS.height = combox.candidateHeight;
      }
    }
    function comboxDivArrow(num)
    {
      var a = combox.div.children;
      if(a.length == 0) return;
      if(combox.candidateFocus != null) comboxDivMouseout(combox.candidateFocus);
      if(num == 40) //住下翻选候选项
      {
        if(combox.divIndex < 0) combox.divIndex = 0;
        else if(combox.divIndex == (a.length-1))
        {
          combox.input.value = combox.clientInput;
          combox.divIndex = -1;
        }
        else combox.divIndex++;
      }
      else
      {
        if(combox.divIndex < 0) combox.divIndex = a.length-1;
        else if(combox.divIndex == 0)
        {
          combox.input.value = combox.clientInput;
          combox.divIndex = -1;
        }
        else combox.divIndex--;
      }
      if(combox.divIndex >= 0)
      {
        combox.candidateSelect  = true;
        combox.candidateFocus   = a[combox.divIndex];
        combox.inputIndex  = parseInt(combox.candidateFocus.id.substr(17));
        combox.input.value = combox.candidateText  = combox.object.options[combox.inputIndex].text;
        combox.inputValue  = combox.object.options[combox.inputIndex].value;
        combox.candidateFocus.style.background = "highlight";
        combox.candidateFocus.style.color      = "highlighttext";
      }
    }
    //--></SCRIPT>
      

  2.   

    怎么这么复杂呀， 如何添加多个这样的 comboBox ?我用下面语句也获取不了它的值
    <input type=button value=chk onclick="alert(MeizzComboBoxID.value)">另外使它居中也不行<center>
    <select id="MeizzComboBoxID">
      <option>combo box</option>
      <option value="11">疏影横斜水清浅</option>
      <option value="22">暗香浮动月黄昏</option>
      <option value="33">梅须逊雪三分白</option>
      <option value="44">雪却输梅一段香</option>
      <option value="55">梅花香自苦寒来</option>
    </select>
    </form>
    </center>