可輸入可下拉的輸入選擇框

 

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" onchange="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" onchange="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>