让下拉列表可编辑

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

<!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>

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

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







评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值