可编辑下拉框的2种实现方式
可编辑下拉框的2种实现方式
发布时间:2016-12-30 来源:查字典编辑
摘要:可编辑下拉框-HTML复制代码代码如下:A类B类C类D类可编辑下拉框-JS复制代码代码如下:可编辑下拉框可编辑下拉框作者functionco...

可编辑下拉框-HTML

复制代码 代码如下:

<div>

<select 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">

</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 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>

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类