大侠帮忙，能否做一个下拉框，让用户即可以选择又可以自己手工输入？多谢，急啊！！！

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
</HEAD>
<BODY>
<select id=select1 name=select1 style="position:absolute;top:100;left:100;width:100" onClick="foo()">
<option> </option>
<option>1</option>
<option>2</option>
<select>
<input type="text" id=text1 name=text1 style="position:absolute;top:100;left:100;width:84" onBlur="add()">
<script>
function foo(){
if(event.offsetX < 84){
select1.style.visibility = "hidden";
text1.focus();
text1.value = "";
}
}
function add(){
select1.style.visibility = "";
var addNode = window.document.createElement("option");
addNode.innerHTML = text1.value;
select1.appendChild(addNode);
}
</script>
</BODY>
</HTML>

解决方案 »

  1.   

    select.js
    -------------
    /*
    作者：fason(阿信)
    日期：2003-7-1
    版本：v1.0
    备注：只作技术交流，如需转载请注明作者等有关信息，多谢合作
    */
    function combox(obj,select){
    this.obj=obj
    this.id=select;
    this.select=document.getElementById(select);
    /*要转换的下拉框*/
    }/*初始化对象*/
    combox.prototype.init=function(){
    var inputbox="<input id='combox_"+this.id+"' name='combox_"+this.name+"' onchange='"+this.obj+".find()' onblur='"+this.obj+".addItem(this.value)' "
    inputbox+="style='position:absolute;width:"+(this.select.offsetWidth-16)+";height:"+this.select.offsetHeight+";left:"+getL(this.select)+";top:"+getT(this.select)+"'>"
    document.write(inputbox)
    with(this.select.style){
    left=getL(this.select)
    top=getT(this.select)
    position="absolute"
    width=this.select.offsetWidth
    height=this.select.offsetHeight
    clip="rect(0 "+(this.select.offsetWidth)+" "+this.select.offsetHeight+" "+(this.select.offsetWidth-18)+")"
    /*切割下拉框*/
    }
    this.select.onchange=new Function(this.obj+".change()")
    this.select.onresize=new Function(this.obj+".resize()")
    this.change()}window:onresize=function(){location.reload()}
    /*初始化结束*/

    ////////对象事件定义///////combox.prototype.find=function(){
    /*当搜索到输入框的值时,下拉框自动定位*/
    var inputbox=document.getElementById("combox_"+this.id)
    with(this.select){
    for(i=0;i<options.length;i++)
    if(options[i].text.indexOf(inputbox.value)==0){
    selectedIndex=i
    this.change();
    break;
    }
    }
    }combox.prototype.change=function(){
    /*定义下拉框的onchange事件*/
    var inputbox=document.getElementById("combox_"+this.id)
    inputbox.value=this.select.options[this.select.selectedIndex].text;
    with(inputbox){select();focus()};
    }combox.prototype.addItem=function(str){
    var findText=false
    for(i=0;i<this.select.length;i++)if(this.select.options[i].text.indexOf(str)==0){findText=true;break}
    if(!findText){
    this.select.options[this.select.length]=new Option(str,str)
    this.select.value=str
    }
    }////////对象事件结束////////*公用定位函数(获取控件绝对坐标)*/
    function getL(e){
    var l=e.offsetLeft;
    while(e=e.offsetParent)l+=e.offsetLeft;
    return l
    }
    function getT(e){
    var t=e.offsetTop;
    while(e=e.offsetParent)t+=e.offsetTop;
    return t
    }
    /*结束*/
    -----------------------------
    test.htm
    ----------------
    <select name="test" id="fason1">
    <option value='1111'>1111</option>
     </select>
    <script language="javascript" src="select.js"></script>
    <script language="javascript">
    var a=new combox("a","fason1")
    a.init()
    /*var b=new combox("b","fason2")
    b.init()
    作用方法：
    var obj=new combox(var1,var2)
    var1:新生成的combox变量(如:a)
    var2:原下拉框的name
    obj.init():对象初始化
    注意:后台取值时用combox_var2进行取值
    */
    </script>