可输入下拉框的实现。

最新推荐文章于 2021-12-08 16:52:29 发布

youjianbo_han_87

最新推荐文章于 2021-12-08 16:52:29 发布

阅读量2.1k

点赞数

分类专栏： javascript 文章标签： function javascript input

javascript 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

转载至 CSDN 论坛回答。

<html>
<head>
    <title>可输入下拉框</title>
</head>
<script language="javascript">
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+"'   οnchange='"+this.obj+".find()'   οnblur='"+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.οnchange=new   Function(this.obj+".change()")
this.select.οnresize=new   Function(this.obj+".resize()")
this.change()

}

window:οnresize=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
}
</script>
<body>

    <select   name="test"   id="fason1">
          <option   value='1111'>中国</option>
          <option   value='22222'>哈萨克斯坦</option>
          <option   value='3333'>伊朗</option>
          <option   value='444'>中华人民共和国</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>
</body>
</html>