再项目中我们可能遇到一种需求,让下拉列表的显示框可编辑,当我接收到这个需求的时候,又上网查资料,找到了一种可以实现的代码,这里把代码附上(借用一下,希望原创看见不要生气哈)
<!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>
注意两个标签都要用绝对定位,因为如果没有绝对定位,当浏览器宽度变小的时候,文本输入框会换行偏移。给他绝对定位之后就不会有偏移的问题。
这样问题就解决了,需要的下伙伴们直接拿走把 = =