请问在javascript中怎样实现combobox的效果？

look
---------------------------------------------
<html>
  <head>
  <style>
  <!--
  .cls1 { position:absolute; left:250px; top:89px; width:216px; height:72px; z-index:1; }
  .cls2 { position:absolute; left:250px; top:89px; width:95px; height:18px; z-index:2 }
  input { font-size: 12px; padding-top: 2px; padding-left: 2px;width:127;}
  //-->
  </style>
  </head>
  <script>
  <!--
  function addOption(pos){
  if(event.keyCode==13){
  var select_obj = document.getElementById("myselect");
  var text_value = document.getElementById("test").value;
  if (select_obj.length)
  {
  for (var i=0;i<select_obj.length;i++)
  {
  // 如果已经存在，不添加，直接退出
  if (select_obj.options[i].text==text_value)
  alert("选项已存在，请重新输入");
  }
  }
  var the_option= new Option(text_value,text_value);
  select_obj.add(the_option);
  select_obj.selectedIndex = select_obj.options.length-1
  }
  }
  //-->
  </script>
  <div class="cls1" style="clip: rect(3 280 21 110)">
  <select name="myselect" style="width:127" onchange="document.getElementById('test').value=this.value">
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
  </select>
  </div>
  <div class="cls2">
  <input type="text" name="test" onkeydown="addOption()" size="20" style="width: 127; height: 23">
  </div>
  </body>
  </html>

解决方案 »

  1.   

    这个是纯select,上边是两个合成的
    <Html>
    <Head>
    <Title>可输入的Select</Title>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    //定义 select 原值
    var oldValue,oldText;
    //select下拉框的onkeydown事件，修改下拉框的值
    function catch_keydown(sel)
    {
     switch(event.keyCode)
     {
      case 13: //回车键
       event.returnValue = false;
       break;
      case 27: //Esc键
       sel.options[sel.selectedIndex].text = oldText;
       sel.options[sel.selectedIndex].value = oldValue;
       event.returnValue = false;
       break;
      case 8:  //空格健
       var s = sel.options[sel.selectedIndex].text;
       s = s.substr(0,s.length-1);
       if (sel.options[sel.selectedIndex].value==sel.options[sel.selectedIndex].text)
       {
        sel.options[sel.selectedIndex].value=s;
        sel.options[sel.selectedIndex].text=s;
       }
       event.returnValue = false;
       break;
     }
     if (!event.returnValue && sel.onchange)
      sel.onchange(sel)
    }//select下拉框的onkeypress事件，修改下拉框的值
    function catch_press(sel){
    if(sel.selectedIndex>=0){
     var s = sel.options[sel.selectedIndex].text + String.fromCharCode(event.keyCode);
     if (sel.options[sel.selectedIndex].value==sel.options[sel.selectedIndex].text)
     {
      sel.options[sel.selectedIndex].value=s;
      sel.options[sel.selectedIndex].text=s;
     }
     event.returnValue = false;
     if (!event.returnValue && sel.onchange)
      sel.onchange(sel)
     }
    }//select下拉框的onfocus事件，保存下拉框原来的值
    function catch_focus(sel) {
     oldText = sel.options[sel.selectedIndex].value;
     oldValue = sel.options[sel.selectedIndex].value;
    }//恢复select下拉列表当前选中的值
    function LoadSelect(obj,value)
    {
     for (var i=0; i< obj.options.length; i++)
      if (obj.options[i].value == value)
      {
       obj.selectedIndex = i;
       break;
      }
    }//select 选择框鼠标上移时提示选择的内容
    function selMouseOver(obj)
    {
     with (document.all.div_hint)
     {
      innerText = obj.options[obj.selectedIndex].text;
      if (innerText.length > 0)
      {
       innerText = " " + innerText + "  ";
       style.display = "block";
       style.left = event.clientX + 16;
       style.top = event.clientY;
      }
     }
    }//select 选择框鼠标移开时消失
    function selMouseOut(obj)
    {
     with (document.all.div_hint)
     {
      style.display = "none"
     }
    }
    //-->
    </SCRIPT>
    </Head>
    <Body>
    <!--调用-->
    <select style='width:130px;z-index:-1' name='tmpSel' onmouseover=selMouseOver(this) onmouseout=selMouseOut(this) onkeydown=catch_keydown(this) onkeypress=catch_press(this) onfocus=catch_focus(this)>
    <option value=""></option>
     <option value='1'>选项1</option>
     <option value='2'>选项2</option>
     <option value='3'>选项3</option> 
    </select><!--提示块-->
    <div id=div_hint style="font-size:12px;color:red;display:none;position:absolute; z-index:2; top:200;background-color: #F7F7F7; layer-background-color: #0099FF; border: 1px #9c9c9c solid;filter:Alpha(style=0,opacity=80,finishOpacity=100);"></div>
    </Body>
    </Html>