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

    
    
        
        200
        500
        1000
    

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");
          });

    });

效果图:

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