2019獨角獸企業重金招聘Python工程師標準>>>

?

PC

<div class="row form-horizontal">
?? ??? ??? ??? ??? ??? ?<div class="col-md-6">
?? ??? ??? ??? ??? ??? ??? ?<div class="form-group">
?? ??? ??? ??? ??? ??? ??? ??? ?<label class="col-sm-2 control-label"><span class="mark-btn">*</span>落款部門</label>
?? ??? ??? ??? ??? ??? ??? ??? ?<div class="col-sm-8">
?? ??? ??? ??? ??? ??? ??? ??? ??? ?<div>
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?<!--select標簽和input外面的span標簽的格式是為了使兩個位置在同一位置，控制位置-->
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?<span style="position:absolute;width:235px;">?
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?<select name="aabb" id="aabb" class="form-control"?
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?onChange="javascript:document.getElementById('ccdd').value=document.getElementById('aabb').options[document.getElementById('aabb').selectedIndex].value;">?
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?<!--下面的option的樣式是為了使字體為灰色，只是視覺問題，看起來像是注釋一樣-->?
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?<option value="" style="color:#c2c2c2;">---請選擇---</option>?
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?<option value="閑人書庫">閑人書庫</option>?
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?<option value="閑人BLOG">閑人BLOG</option>?
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?</select>?
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?</span>
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?<span style="position:absolute;width:200px;margin:1px;">?
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?<input type="text" name="ccdd" id="ccdd" placeholder="可選擇也可輸入的下拉框" class="form-control" style="border:0;height: 32px;">?
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?</span>

?? ??? ??? ??? ??? ??? ??? ??? ??? ?</div>
?? ??? ??? ??? ??? ??? ??? ??? ?</div>
?? ??? ??? ??? ??? ??? ??? ?</div>
?? ??? ??? ??? ??? ??? ?</div>
?? ??? ??? ??? ??? ?</div>

?

移動端===================================
<div class="weui_cell weui_cell_select weui_select_after">
?? ??? ??? ?<div class="weui_cell_hd">落款部門</div>
?? ??? ??? ?<div class="weui_cell_bd weui_cell_primary" style="
? ? height: 44px;
">

?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?<!--select標簽和input外面的span標簽的格式是為了使兩個位置在同一位置，控制位

置-->
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?<span style="position:absolute;width: 80%;">?
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?<select name="aabb" id="aabb" class="weui_select" οnchange="javascript:document.getElementById

('ccdd').value=document.getElementById('aabb').options[document.getElementById('aabb').selectedIndex].value;" style="
? ? opacity: 0;
">?
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?<!--下面的option的樣式是為了使字體為灰色，只是視覺問題，看起來像是注

釋一樣-->?
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?<option value="" style="color:#c2c2c2;">---請選擇---

</option>?
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?<option value="閑人書庫">閑人書庫</option>?
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?<option value="閑人BLOG">閑人BLOG</option>?
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?</select>?
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?</span>
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?<span style="position:absolute;width: 65%;z-index: 2;">?
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?<input type="text" name="ccdd" id="ccdd" placeholder="可選擇也可輸

入的下拉框" class="weui_input" style="border:0;padding-left: 15px;height: 44px;line-height: 44px;">?
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?</span>

?? ??? ??? ?</div>
?? ??? ?</div>

?

?

優化后========================

<div class="weui_cell weui_cell_select weui_select_after">
?? ??? ?<div class="weui_cell_hd">地點</div>
?? ??? ?<div class="weui_cell_primary" style="height: 44px;">
?? ??? ??? ?<span style="position:absolute;width: 80%;">?
?? ??? ??? ??? ?<select name="placeName" id="placeName" class="weui_select" οnchange="changePlaceFunc();" style="opacity: 0;">
?? ??? ??? ??? ??? ?<option value="0" style="color:#c2c2c2;">---請選擇---</option> ?
?? ??? ??? ??? ??? ?<option value="1">本班教室</option>
?? ? ? ? ? ? ? ? ? ?<option value="2">多媒體教室</option>
?? ? ? ? ? ? ? ? ? ?<option value="3">操場</option>
?? ? ? ? ? ? ? ? ? ?<option value="4">其他</option>
?? ??? ??? ??? ?</select>?
?? ??? ??? ?</span>
?? ??? ??? ?<span style="position:absolute;width: 55%;z-index: 2;top:10px;">?
?? ??? ??? ??? ?<input class="weui_input" id="place" name="place" maxlength="30" type="text" placeholder="請輸入地點" style="border:0;padding-left: 15px;height: 20px;">?
?? ??? ??? ?</span>
?? ??? ??? ?<i class="fa fa-plus-circle" aria-hidden="true" style="position: absolute;right: 15px;top: 14px;color: #04BE02;font-size:18px"></i>
?? ??? ?</div>
?? ?</div>

轉載于:https://my.oschina.net/u/3356110/blog/1558217

總結

以上是生活随笔為你收集整理的可输入可下拉的输入选择框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。