欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 前端技术 > javascript >内容正文

javascript

javascript实现的一个带下拉框功能的文本框

发布时间：2025/4/16 javascript 58 豆豆
生活随笔 收集整理的这篇文章主要介绍了 javascript实现的一个带下拉框功能的文本框 小编觉得挺不错的,现在分享给大家,帮大家做个参考.
我们需要一个可选的下拉框来选取内容，但是但是又有可以自定义输入的需求。对于这种需求，大部分网站使用的都是一个下拉框和一个 input text ，并列或分行给出选择。那么，我们希望它看上去像一个可以输入也可以选择的下拉框，那该如何做呢？

其实我们可以通过 css position 定位及少许的 javascript 代码，模拟出来这种效果。

设计思路：在下拉列表上覆盖一个文本框，当选择下拉列表的内容时，顺便将选项的文字复制到文本框中，就可以实现仿下拉文本框的效果。（在java中有JComboBox可以实现，js中必须自己实现。）


有了思路就不难了，下面是范例源码：

<!DOCTYPE html> <html> <head><title>可编辑可选择的下拉框</title><meta charset="utf-8"><style>.list-name-input{color: #333;font-family: tahoma, 'Microsoft YaHei', 'Segoe UI', Arial, 'Microsoft Yahei', Simsun, sans-serif;font-size: 15px;font-weight: bold;height: 50px;margin: 0px;padding: 0px;position: relative;width: 530px;}.list-name-for-select{border: 0;color: #555;height: 20px;lighting-color: rgb(255, 255, 255);line-height: 20px;margin:0 0 10px 0; outline-color: #555;outline-offset: 0px;outline-style: none;outline-width: 0px; padding: 4px 6px;position: absolute;top: 1px;left: 3px;vertical-align: middle;width: 486px;}.list-name-input-for-select:focus{border: 0;border-radius: 0;}.list-select{background-color: #FFF;border:1px #ccc solid;border-radius: 4px;color: #555;cursor: pointer;height: 30px;left: 0px;margin:0 0 10px 0;padding: 4px 6px;position: absolute;top: 0px;vertical-align: middle;white-space: pre;width: 530px;}</style> </head> <body><div id="list-name-input" class="list-name-input"><select type="text" class="list-select" id="list-select"><option value="">新建</option><option value="0">10-NGCFG-update-1000</option><option value="1">11-NGCFG-update-1000</option><option value="2">111</option><option value="3">12-NGCFG-update-1000</option><option value="4">13-NGCFG-update-1000</option><option value="5">14-NGCFG-update-1000</option><option value="6">15-NGCFG-update-1000</option><option value="7">16-NGCFG-update-1000</option><option value="8">17-NGCFG-update-1000</option><option value="9">18-NGCFG-update-1257</option><option value="10">2-NGCFG-update-100</option><option value="11">3-NGCFG-update-150</option><option value="12">4-NGCFG-update-200</option><option value="13">5-NGCG-update-250</option><option value="14">6-NGCFG-update-418</option><option value="15">7-NGCFG-update-500</option><option value="16">8-NGCFG-update-1000</option><option value="17">9-NGCFG-update-1000</option><option value="18">@ALL</option><option value="19">@CNC-BJ-4</option><option value="20">CNC-BJ--测试</option><option value="21">test</option></select><input type="text" class="name item-width list-name-for-select" id="list-name-for-select"></div> <script>var listName = document.getElementById('list-name-for-select');var listSelect = document.getElementById('list-select').onchange = function(e){console.log(this)if(this.value){listName.value = this.value + ' | ' + this.options[this.selectedIndex].text;}else{listName.value = ''}};</script> </body> </html>

总结

以上是生活随笔为你收集整理的javascript实现的一个带下拉框功能的文本框的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。