Posted in Javascript onMay 08, 2014
有时我们需要一个可选的下拉框来选取内容,但是但是又有可以自定义输入的需求。对于这种需求,大部分网站使用的都是一个下拉框和一个 input text ,并列或分行给出选择。那么,我们希望它看上去像一个可以输入也可以选择的下拉框,那该如何做呢?
其实我们可以通过 css position 定位及少许的 javascript 代码,模拟出来这种效果。
<!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实现的一个带下拉框功能的文本框
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@