请问怎么实现可编辑下拉框
日期：2014-05-16 浏览次数：20446 次
请教如何实现可编辑下拉框
如题，该下拉框位置不能在页面固定，而是相对的，比如和直接放一个下拉框一样。我在网上找了很多代码，有的实现方法是一个文本框和一个下拉框重合实现，这样文本框和下拉框都有一个position:absolute属性，必须固定其位置；要么就是只有IE浏览器能够浏览，别的浏览器不兼容。
所以想请教一个能够被多数浏览器兼容，位置又可以是相对位置的可编辑下拉框？
望各大侠多指教
------解决方案--------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>
这样试试
------解决方案--------------------
用div 模拟
------解决方案--------------------
如题，该下拉框位置不能在页面固定，而是相对的，比如和直接放一个下拉框一样。我在网上找了很多代码，有的实现方法是一个文本框和一个下拉框重合实现，这样文本框和下拉框都有一个position:absolute属性，必须固定其位置；要么就是只有IE浏览器能够浏览，别的浏览器不兼容。
所以想请教一个能够被多数浏览器兼容，位置又可以是相对位置的可编辑下拉框？
望各大侠多指教
------解决方案--------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>
这样试试
------解决方案--------------------
用div 模拟
------解决方案--------------------
<!DOCTYPE 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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
