可输入可下拉的输入选择框

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>