页面中实现下拉框和搜索框一体功能
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>实现下拉框和搜索框一体功能</title>
</head>
<body>
<h4>这个既可以做input 又可以使用 select</h4>
<div style="position: relative;" class="form-control">
<span style="margin-left: 100px; width: 50%; overflow: hidden;">
<select name="faultDiscription" style="width:50%; margin-left: -100px;" id="selected_">
<option value="27">1</option>
<option value="23">2</option>
<option value="25">3</option>
<option value="13">4</option>
<option value="24">5</option>
<option value="4">6</option>
<option value="5">7</option>
<option value="26">8</option>
<option value="21">9</option>
<option value="10">10</option>
<option value="12">11</option>
<option value="11">12</option>
</select>
</span>
<input id="faultDiscription" name="box" style="width: 45%; position: absolute; left: 0px; padding: 0 12px;">
</div>
<script src="jquery.js"></script>
<script>
/*取消默认初始化的时候 默认选择第一个option选项*/
//当选择下拉按钮时 让选择的项在input 框显示
$("#selected_").change(function(){
var aa=$("#selected_ option:selected").text();
$("#faultDiscription").val(aa);
});
$('#selected_')[0].selectedIndex = -1;
</script>
</body>
</html>
