可编辑下拉框的2种实现方式

前端技术 2023/09/09 JavaScript
可编辑下拉框-HTML
复制代码 代码如下:

<div style=\"position:relative;\">
<select style=\"width:120px;\" onchange=\"document.getElementById(\'input\').value=this.value\">
<option value=\"A类\">A类</option>
<option value=\"B类\">B类</option>
<option value=\"C类\">C类</option>
<option value=\"D类\">D类</option>
</select>
<input id=\"input\" name=\"input\" style=\"position:absolute;width:99px;height:16px;left:1px;top:2px;border-bottom:0px;border-right:0px;border-left:0px;border-top:0px;\">
</div>

可编辑下拉框-JS
复制代码 代码如下:

<html>
<head>
<meta name=\"GENERATOR\" content=\"Microsoft FrontPage 5.0\">
<meta name=\"ProgId\" content=\"FrontPage.Editor.Document\">
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=gb2312\">
<title>可编辑下拉框</title>
</head>
<body>
<table style=\"border:2px outset;background-color:#d2e8FF\" width=\"250\" height=\"100\" align=\"center\">
<tr>
<td width=\"60%\" height=\"30\" align=\"center\">
<select name=\"fason\">
<option value=\"可编辑下拉框\">可编辑下拉框</option>
<option value=\"作者\">作者</option>
</select>
</td>
</tr>
</table>
<script language=\"javascript\">
function combox(obj,select){
this.obj=obj
this.name=select;
this.select=document.getElementsByName(select)[0];
/*要转换的下拉框*/
}
/*初始化对象*/
combox.prototype.init=function(){
var inputbox=\"<input name=\'combox_\"+this.name+\"\' onchange=\'\"+this.obj+\".find()\' \"
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\"
clip=\"rect(0 \"+(this.select.offsetWidth)+\" \"+this.select.offsetHeight+\" \"+(this.select.offsetWidth-18)+\")\"
/*切割下拉框*/
}
this.select.onchange=new Function(this.obj+\".change()\")
this.change()

}
/*初始化结束*/

////////对象事件定义///////
combox.prototype.find=function(){
/*当搜索到输入框的值时,下拉框自动定位*/
var inputbox=document.getElementsByName(\"combox_\"+this.name)[0]
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.getElementsByName(\"combox_\"+this.name)[0]
inputbox.value=this.select.options[this.select.selectedIndex].text;
with(inputbox){select();focus()};
}
////////对象事件结束///////
/*公用定位函数(获取控件绝对坐标)*/
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>
<script language=\"javascript\">
var a=new combox(\"a\",\"fason\")
a.init()
</script>

</body>

</html>

本文地址：https://www.stayed.cn/item/23510

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案