让下拉列表可编辑

最新推荐文章于 2021-05-26 19:41:26 发布

YZiAngel

最新推荐文章于 2021-05-26 19:41:26 发布

阅读量856

点赞数

分类专栏：前端工程师

本文链接：https://blog.csdn.net/YZi_Angel/article/details/53695226

版权

前端工程师专栏收录该内容

52 篇文章 0 订阅

订阅专栏

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

<!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" οnchange="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>

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

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