您的位置：首页 > 其它

让下拉列表可编辑

2016-12-16 17:27 274 查看

再项目中我们可能遇到一种需求，让下拉列表的显示框可编辑，当我接收到这个需求的时候，又上网查资料，找到了一种可以实现的代码，这里把代码附上（借用一下，希望原创看见不要生气哈

）

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
function changeF() {
document.getElementById('makeupCo').value = document.getElementById('makeupCoSe').options[document.getElementById('makeupCoSe').selectedIndex].value;
}
</script>
<span style="position:absolute;border:1pt solid #DCDCDC;overflow:hidden;width:100px;border-radius: 5px; height:23px;clip:rect(-1px 110px 110px 90px);">
<select name="makeupCoSe" id="makeupCoSe"
style="width:105px;height:25px;margin:-1px;border-radius: 5px;border-color:#DCDCDC;border-top-color:transparent"
onChange="changeF();">
<option value='java'>java</option>
<option value='c++'>c++</option>
<option value='python'>python</option>
</select>
</span>
<span style="position:absolute;border-top:1pt solid #DCDCDC;border-left:1pt solid #DCDCDC;border-bottom:1pt solid #DCDCDC;width:90px;height:23px;border-radius: 5px 0 0 5px">
<input type="text" name="makeupCo" id="makeupCo" value="请选择或输入"
style="width:82px;height:20px;border:0pt;color:#666;margin-left: 5px;">
</span>
</body>
</html>

他的思想其实就是当下拉列表的内容改变的时候，将下拉列表里的内容拷贝给输入框，很明显，他的代码有大量的冗余，把很简单的问题想的有点复杂，这里加上我的修改版，有兴趣的童鞋可以试一下

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<style>
*{
padding: 0;
margin: 0;
}
body{
padding: 100px;
width: 100%;
}
#makeupCoSe,#makeupCo{
position: absolute;
left: 100px;
display: inline-block;
border-radius: 5px;
outline: none;
}
#makeupCoSe{
top: 100px;
width: 124px;
height: 32px;
}
#makeupCo{
width: 100px;
height: 30px;
left: 105px;
top: 101px;
border: none;
}
</style>
<select id="makeupCoSe" onchange="changed()">
<option value='java'>请输入</option>
<option value='java'>java</option>
<option value='c++'>c++</option>
<option value='python'>python</option>
</select>
<input id="makeupCo" type="text" placeholder="请输入内容"/>
<script>
function changed()
{
document.getElementById('makeupCo').value= document.getElementById('makeupCoSe').options[document.getElementById('makeupCoSe').selectedIndex].value;
}
</script>
</body>
</html>

注意两个标签都要用绝对定位，因为如果没有绝对定位，当浏览器宽度变小的时候，文本输入框会换行偏移。给他绝对定位之后就不会有偏移的问题。

这样问题就解决了，需要的下伙伴们直接拿走把 = =

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航