html 可輸入可選擇下拉框

2021-07-22 13:07:38 字數 755 閱讀 3510

別跟我講需求!這是開發人員心裡無時無刻不在吶喊的話哪。。。

這段時間公司在開發個b2b電商後台,需求人員和我們說,我這個下拉框是可以輸入的哦!我當時一臉懵逼,我接觸前端那麼久,我就還沒見過可輸入可選擇的下拉框,當時就感覺頓時豐富了我的三觀。沒辦法,那就上網搜唄。。。費我九牛二虎之力

html:

class

="form-control"

id="spec_num0"

name

="spec_num"

onchange

="document.getelementbyid('input0').value=$('#spec_num0 option:selected').text()"

>

>

金宇彬option

>

>

topoption

>

select

>

"input"

class

="form-control selectinput"

name

="input"

placeholder

="請選擇"

/>

css:

.selectinput

它的核心思想就是把input定位在select上,當select發生變化時把值放到input上,這就形成了可輸入可選擇下拉框的視覺感受啦。

可輸入的下拉框

可輸入的下拉框 title head body divstyle position relative span style margin left 100px width 18px overflow hidden select style width 118px margin left 100px ...

可輸入的下拉框

可輸入的下拉框 title p head p body p p div style position relative p span style margin left 100px width 18px overflow hidden p select style width 118px margi...

可輸入的下拉框

一 碎碎念 是我的第一篇博文,事實上我的草稿箱裡不止這一篇。技術方面對自己沒什麼信心,總想反覆推敲將所有的問題考慮到再發表,可是所謂的 所有問題 總是那麼多 又沒有誰規定一定不能犯錯 寫的好方便大家學習交流,寫的不好也請大家多多提意見,共同學習 go 二 製作乙個可輸入又可選擇的下拉框 解題思路 1...