1. 程式人生 > >下拉選單和文字框結合

下拉選單和文字框結合

思想: 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>