<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<script src="../js/jquery/jquery-3.2.1.js"></script>
<link href="../js/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="../js/bootstrap/js/bootstrap.min.js"></script>
<body>
<div style="padding:5px ;position:relative" class="col-sm-4">
<span style="position:absolute;top:5px;overflow:hidden;width:95%;height:32px;">
<!--这个是个多选框，用onchange事件的时候 ，将这个select的id传进去-->
<select name="trains" οnchange="qlcTrainS('qlc_zdz1')" class="form-control" id="qlc_zdz1" style="height:30px;outline:0;">
<option value="test1">test1</option>
<option value="test2">test2</option>
<option value="test3">test3</option>
<option value="test4">test4</option>
<option value="test5">test5</option>
</select>
</span>
<span style="position:absolute;top:7px;left:10px;margin-top:1px;margin-left:1px;width:80%;height:28px;border-radius:5px;">
<!--这里是input框，定位到select的上面-->
<input type="text" name="ccdd" id="qlc_zdz" class="ccdd" placeholder="可选择也可输入的下拉框" style="width:80%;height:24px;border:0pt;border-radius:5px;outline:0">
</span>
</div>
<script>
<!--将select的值赋给input框-->
function qlcTrainS(idName) {
var arrValue=document.getElementById(idName).options[document.getElementById(idName).selectedIndex].value;
$("#"+idName+"").parent('span').next('span').children('input.ccdd').val(arrValue)
}
</script>
</body>
</html>
因为我引用了bootstrap ，所以样式用了class=“form-control”,如果没有引用bootstrap，可以写自定义样式，原理是一样的，input框固定到select上面就行了
二、可以用H5新特性来完成这个功能
用datalist标签来给输入框提供一个选择（但是该属性不兼容IE9，只兼容到ie10及ie10+）；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>list属性示例</title>
</head>
<body>
text: <input type="text" name="greeting" list="greetings">
<!-- 使用style="display:none;"将datalist元素设定为不显示 -->
<datalist id="greetings" style="display:none;">
<option value="Good Morning">Good Morning</option>
<option value="Hello">Hello</option>
<option value="Good Afternoon">Good Afternoon</option>
</datalist>
</body>
</html>
欢迎关注我的个人技术公众号！javascript艺术
