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

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