<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");
});
});
效果图:
鉴于水平有限难保不会出现错漏之处,如果您觉得那里有错误,请留言