可编辑的下拉框一、
<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>
可编辑的下拉框二、
<html>
<head> <meta charset="utf-8"> <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>
时间： 2024-10-16 19:10:51