《javascript实现的一个带下拉框功能的文本框_.docx》由会员分享，可在线阅读，更多相关《javascript实现的一个带下拉框功能的文本框_.docx（8页珍藏版）》请在三一文库上搜索。
1、javascript实现的一个带下拉框功能的文本框_ 这篇文章主要介绍了javascript实现的一个带下拉框功能的文本框,需要的伴侣可以参考下 有时我们需要一个可选的下拉框来选取内容，但是但是又有可以自定义输入的需求。对于这种需求，大部分网站用法的都是一个下拉框和一个 input text ，并列或分行给出选择。那么，我们盼望它看上去像一个可以输入也可以选择的下拉框，那该如何做呢？ 其实我们可以通过 css position 定位及少许的 javascript 代码，模拟出来这种效果。 代码如下: !DOCTYPE html html head title可编辑可选择的下拉框/title m
2、eta 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: #55
3、5; 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:f
4、ocus 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 /
5、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 valu
6、e=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 opti
7、on 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 op
8、tion 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.optionsthis.selectedIndex.text; else listName.value = ; /script /body /html 更多信息请查看IT技术专栏 .