如题，该下拉框位置不能在页面固定，而是相对的，比如和直接放一个下拉框一样。我在网上找了很多代码，有的实现方法是一个文本框和一个下拉框重合实现，这样文本框和下拉框都有一个position:absolute属性，必须固定其位置；要么就是只有IE浏览器能够浏览，别的浏览器不兼容。
所以想请教一个能够被多数浏览器兼容，位置又可以是相对位置的可编辑下拉框？
望各大侠多指教
所以想请教一个能够被多数浏览器兼容，位置又可以是相对位置的可编辑下拉框？
望各大侠多指教
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function createEditableSelect(obj,node){
var div=document.createElement("div");
var text=document.createElement("input");
text.type="text";
var sel=document.createElement("select");
for(var i in obj){
var option=document.createElement("option");
option.value=obj[i];
option.innerHTML=i;
sel.appendChild(option);
}
sel.onchange=function(){
var con=sel[sel.selectedIndex].innerHTML;
text.value=con;
}
sel.style.position="absolute";
sel.style.width="100px";
text.style.position="absolute";
text.style.width="80px";
div.appendChild(sel);
div.appendChild(text);
if(!node){
document.body.appendChild(div);
}else{
node.appendChild(div);
}
}
window.onload=function(){
createEditableSelect({'1':'a','2':'b','4':'c'});
}
</script>
</head><body>
<div style="float:left">sss</div>
</body>
</html>这样试试
<html>
<head>
<meta charset="gb2312" />
<title></title>
<style>
.my-select * {
margin:0; padding:0;
}
.my-select input,
.my-select select {
font-size:100%;
}
.my-select {
position:relative;
margin:100px;
font-size:12px;
}
.my-select-select {
position:absolute; left:0; top:0; *top:1px;
width:100px;
clip:rect(0 auto auto 80px);
}
.my-select-text {
width:80px; *height:16px; *line-height:16px;
}
</style>
</head>
<body>
<div class="my-select">
<select class="my-select-select" id="my-select-select">
<option value="1-1">1-11111111111111111111111</option>
<option value="1-2">1-2</option>
<option value="1-3">1-3</option>
</select>
<input class="my-select-text" id="my-select-text" />
</div>
<script>
function $(o){return document.getElementById(o)}
$('my-select-select').onchange = function(){
$('my-select-text').value = this.value;
}
</script>
</body>
</html>
需要找的可编辑下拉框是能够像一个普通的下拉框一样可以遵循HTML的规律，放到页面任意位置
<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>
<style>
a{color:blue;text-decoration:none}
a:hover{color:red}
</style>
</head>
<body>
<table style="border:2px outset;background-color:#d2e8FF" width="250" height="100" align="center">
<tr>
<td width="100%" align="center" colspan="2"><b>可编辑下拉框</b></td>
</tr>
<tr>
<td width="60%" height="30" align="center">
<select name="fason">
<option value="可编辑下拉框">可编辑下拉框</option>
<option value="作者:阿信">阿信</option>
</select>
</td>
<td width="40%" height="30" align="left">
<input type=button value=" 取值 " onclick="alert(document.getElementsByName('combox_fason')[0].value)">
</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>
<p align="right">作者：<a href="http://fason.nease.net">fason(阿信）</a>欢迎交流!</p>
</body>
</html>