最近在做專案時，遇到了乙個奇怪的需求，簡單來說就是在下拉框選擇後，可以對選中項的文字進行修改，選項文字和使用者的輸入之間屬於雙向繫結的關係。以前沒有遇到過這種需求....在嘗試了幾種方法後，總算把這個問題解決了，下面簡單談一下我的方法。
可輸入拉框demo位址我剛開始的想法是能不能直接在每個 option 裡邊巢狀乙個 input 標籤,然後把每個 input 的 value 值與 option 的文字值進行繫結，實踐後這種方法行不通。
我現在的方法是使用乙個 input 標籤來動態獲取 select 框當前選項的文字值，然後當 input 輸入時，動態修改對應 option 的文字值，以此來實現雙向繫結的功能。
因為我們使用的分別是 input 和 select ，因此我們需要對這兩個標籤進行一些樣式的修改以此來讓它們看著就像是乙個可輸入的 select 框。主要是調整 input 的位置，使其覆蓋住 select 框中原本文字的位置，然後設定 input 隱藏掉右邊的邊框。因為它們的資料是雙向繫結的，因此這樣看起來就是乙個可輸入的下拉框。
可輸入下拉框demo展示title>
name="description"
content="可輸入下拉框demo展示">
name="viewport"
content="width=device-width, initial-scale=1">
rel="stylesheet"
href="">
type="text/css">
#container
.select-box
.input-box
style>
head>
id="container">
可輸入下拉框h3>
class="select-box"
v-model="selectvalue">
v-for="(item, index) in options"
:key="index"
:value="item.value">}option>
select>
type="text"
class="input-box"
ref="inputbox"
:value="inputvalue" @input="changevalue()">
div>
src="">
script>
var container = new vue(, , , ]
},computed:
});return value;}},
methods:
});}}})
script>
body>
html>
複製**這是我暫時想到的解決辦法，以前沒有遇到過這樣的問題，實現的過程還是挺有趣的，以後有時間再看看能不能再完善一些。
可輸入的下拉框
可輸入的下拉框 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...