最近要实现可输入下拉框,写法如下:
<li class="col-md-3">
<strong>一级标签</strong>
<select name="parentTagName" id="parentTagName" style="width:150px;" οnchange="select()">
<option value="" >请选择</option>
<c:forEach items="${allParentTags }" var="tag" varStatus="status">
<option <c:if test="${parentTagName==tag.tagName }">selected</c:if> value="${tag.tagName }" >${tag.tagName }</option>
</c:forEach>
</select>
<input type="text" name="parentTagName" placeholder="输入一级标签" value="${parentTagName }" style="width:130px;margin-left:-157px">
</li>
<script type="text/javascript">
/*可输入下拉框 */
function select(){
var selected = $('#parentTagName').val();
//将下列框选择值赋给输入框
$('input[name="parentTagName"]').val(selected);
}
/*输入后模糊检索一级标签 */
function searchParentTags(){
var parentTagName = $('input[name="parentTagName"]').val();
$.ajax({
type: 'POST',
url: "${ctx}/manage/findParentTags",
data :{"parentTagName":parentTagName},
traditional:true,
success: function(data) {
if (data != null) {
/* 去除原来下拉框选项 */
$("#parentTagName").empty();
for(var i = 0;i < data.length;i++){
/*添加检索到的下拉框选项 */
$("#parentTagName").append("<option value='" + data[i].tagName + "'>" + data[i].tagName + "</option>");
}
}
}
})
}
</script>