第一种

为了样式好看一些我是搭配的bootstarp使用的，如果不使用bootstarp就去掉 class="form-control" 和 class="form-group col-lg-3"属性

<div class="form-group col-lg-3">
			<input type="text" id="input" style="position:absolute;width:170px;height:26px; margin:6px; border:none"/>
			<select id="select" class="form-control" style="width:212px;height:38px;" >
				<option value="">请选择</option>
				<option value="java">java</option>
				<option value="C++">C++</option>
				<option value="c+">c+</option>
				<option value="html">html</option>
				<option value="css">css</option>
			</select>
			<script>
				$(function () {
					$("#select").change(function(){
						$("#input").val($(this).children('option:selected').val());
					});
				})
			</script>
		</div>

效果：

---

第二种 

第二种比第一种的好处是输入文字后模糊匹配下拉框内容，坏处谷歌兼容不好

1. 当作下拉框使用

 1.1 模糊查询下拉框

 2. 当作text文本框使用

<input id="name" name="name" list="optionList" class="form-control"/>
<datalist id="optionList">
	<option value="张三">张三</option>
	<option value="学习">学习</option>
	<option value="JAVA">JAVA</option>
	<option value="张四">张四</option>
	<option value="张五">张五</option>
</datalist>

// 选取的option会绑定到input上，所以提交数据到后台的时候正常提交input就行。

说明：回显初始化option标签可使用ajax或el表达式，把后台数据遍历到option上即可使用。