可输入或下拉的选择框并且输入框获得下拉框内容

<div>
    <input type="text" id="num" class="num_input" autocomplete="off" />
    <select id="num_select" class="num_select">
        <option value='-1' style='display: none'></option>
        <option value="200">200</option>
        <option value="500">500</option>
        <option value="1000">1000</option>
    </select>

</div>

css样式:

.num_input {
    position: relative;
    top: 0px;
    z-index: 2;
    width: 200px;
    background-color: #FFF;
    height: 30px;
    margin-top: 1px;
    border-radius: 0px 3px 3px 0px;
    border-left: 0px;
    border-top: 1px solid #cccccc;
    border-right: 0px;
    border-bottom: 0px;
    font-size: 14px;
    color: #9a9a9a;
    padding-right: 13px;
    box-sizing: border-box;
    left:205px;
}

.num_select {
    position: relative;
    z-index: 1;
    width: 220px;
    height: 32px;
    border-radius: 3px;
    font-weight: bold;
    font-size: 14px;
    color: #9a9a9c;
    border: 1px solid #cccccc;
    box-sizing: border-box;

}

js内容:

    $(document).ready(function(){
          $("#num_select").change(function (){
              $("#num").val($("#num_select").val());
          });
          
          $("#num").focus(function(){
              $("#num").css("text-align", "center");
              $("#num").select();
          });
          
          $("#num").blur(function(){
              $("#num").css("text-align", "left");
          });

    });

效果图:

鉴于水平有限难保不会出现错漏之处，如果您觉得那里有错误,请留言