下拉選單和文字框結合
阿新 • • 發佈:2019-02-15
思想: input在最上層 select在最下層 select超出input一個箭頭的長度 在改變select時 通過js將值賦給input
細節: 可以將select的字型顏色換成透明 option換成正常顏色 這樣可以避免bug fa2這個js 是為了修改文字框後 無法選擇當前select的bug(因為最底層的select的val並沒改變)
程式碼:
<td width='20%' id="engine"><span class="tt">發動機號:</span> <input id="engineval" style="width: 100px;position:relative;z-index:998;" maxlength="9" type="text" class="u-ipt" placeholder="發動機號" value="$!{engineno}" onchange="fa2();"/> <select class="u-select" style="width: 112px;position:absolute;left:314px;top:33px;z-index:99;color: rgba(0,0,0,0); " id="engine2" onChange="showinput2(this.options[this.options.selectedIndex].value);"> <option value="1" style="color: #999999">1</option> <option value="2" style="color: #999999">2</option> <option value="3" style="color: #999999">3</option> </select> </td>
<script>
function showinput2(s){
$("#engineval").val(s);
}
function fa2(s){
$("#engine2").val("");
}
</script>