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

作者：whsnow 时间：2024-04-22 13:08:08　

可编辑下拉框-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>

标签：可编辑,下拉框

投稿

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

猜你喜欢

JS如何实现form表单登录验证并使用MD5加密详解

使用Python下载Bing图片（代码）

WAP中的ASP技术

从零开始写jQuery框架

Python的命令行参数实例详解

10行Python代码实现Web自动化管控的示例代码

解密ThinkPHP3.1.2版本之独立分组功能应用

ASP中Cache技术的应用

Win10下为VSCode配置LaTex编辑器的方法

跟我学习javascript的闭包

Python比较配置文件的方法实例详解

Qt5 实现主窗口状态栏显示时间

pytorch中tensor的合并与截取方法

聚焦 DreamWeaver MX 2004

Python使用Matplotlib实现雨点图动画效果的方法

Python常用GUI框架原理解析汇总

pdf论文中python画的图Type 3 fonts字体不兼容的解决方案

妙用dw图层与表格进行网页布局

20个Python常用技巧分享

vue实现简单的登录弹出框