當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
javascript实现的一个带下拉框功能的文本框
生活随笔
收集整理的這篇文章主要介紹了
javascript实现的一个带下拉框功能的文本框
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
我們需要一個可選的下拉框來選取內(nèi)容，但是但是又有可以自定義輸入的需求。對于這種需求，大部分網(wǎng)站使用的都是一個下拉框和一個 input text ，并列或分行給出選擇。那么，我們希望它看上去像一個可以輸入也可以選擇的下拉框，那該如何做呢？
其實我們可以通過 css position 定位及少許的 javascript 代碼，模擬出來這種效果。
設(shè)計思路：在下拉列表上覆蓋一個文本框，當選擇下拉列表的內(nèi)容時，順便將選項的文字復(fù)制到文本框中，就可以實現(xiàn)仿下拉文本框的效果。（在java中有JComboBox可以實現(xiàn)，js中必須自己實現(xiàn)。）
有了思路就不難了，下面是范例源碼：
<!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>總結(jié)
以上是生活随笔為你收集整理的javascript实现的一个带下拉框功能的文本框的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java vector arraylis
- 下一篇： JSplitPane