直接上代碼
<!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="jquery-3.2.1.js"></script>
<link href="bootstrap.min.css" rel="stylesheet">
<script src="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="test" 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中沒有onclick方法,需要用js添加，上面的onclick方法可以刪除-->
$(function(){
$("select[name='test']").change(function(){
qlcTrainS(this.id);
})
});
<!--將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>
本文案例轉自，https://blog.csdn.net/zhangjing1019/article/details/78971139，添加了一個方法，如有冒犯請告知，，謝謝