可输入的下拉框

原理是在select下拉框上面加一个input框
1.写好select下拉框和input框

<span class="wrap">合同类别：
            <select id="htlb_category" name="htlb_category" class="select" onchange="htlbInput()">
                <option class="mini-textbox"  name ="开发" id ="开发" value ="开发">1.开发</option>
                <option class="mini-textbox"  name ="转让" id ="转让" value ="转让">2.转让</option>
                <option class="mini-textbox"  name ="咨询" id ="咨询" value="咨询">3.咨询</option>
                <option class="mini-textbox"  name ="服务" id ="服务" value="服务">4.服务</option>
            </select>
            <input type="text" id="options1" name="options" class="options" value="" placeholder="请输入合同类别">
        </span>

2.调好定位使input框正好在select框上

.wrap {
        position: relative;
    }
    .select {
        width: 147px;
        height: 26px;
    }
    .options {
        width: 128px;
        position: absolute;
        left: 71px;
        top: -2px;
        height: 21px;
        border: none;
    }

3.下拉框选好一个值后这个时候值还在下拉框上还没去到input框中所以要把select选中的值赋值给input框

<%--把合同类别的下拉菜单的值赋给input--%>
    function htlbInput() {
        //获得下拉菜单的所有值
        var htlb_category = document.getElementById("htlb_category");
        //获取我选择的那个值
        var htlb_res=htlb_category.value;
        var htlb=null;
        if(htlb_res=="开发"){
            htlb=1
        }else if(htlb_res=="转让"){
            htlb=2
        }else if(htlb_res=="咨询"){
            htlb=3
        }else if(htlb_res=="服务"){
            htlb=4
        }
        $("#options1").val(htlb);
    }