能手动输入的下拉选

ssm框架下传统select标签处理

首先引入js jquery.editable-select.min.js   jquery.editable-select.js jquery.select.js 和css样式文件 jquery.select.js  jQuery官网可下载！

Html或jsp页面代码如下;

<div class="form-group">
<label for="exampleInputEmail1">车型图片</label></div><div class="form-group">
<input type="file" id="image" name="image" onchange="selectFileImage(this)">
</div>
<div class="form-group"> <img src="" id="myImage"/></div>
<!--图片上传结束 -->
<div class="form-group">
<label for="exampleInputEmail1">品牌</label>
<select class="form-control" style="width: 130px;" id="carBrandId" name="carBrandId" >

<c:forEach items="${carlist }" var="carlist" >
<option value="${carlist.id}">${carlist.name }
</option>
</c:forEach>
</select>
</div> 
<div class="form-group">
<label for="exampleInputEmail1">供应商</label>
<select class="form-control" name="carVendorId" id="carVendorId" style="width: 146px;">
<option value="">请选择供应商</option> 
</select> 
</div>

 

关联下拉选控制函数、

$('#carBrandId').editableSelect({

onSelect:function(){
var carBrand = document.getElementById("carBrandId");
var carBrandId=carBrand.value;//取到页面中供应商的id
//alert(carBrandId);
if( carBrand.value != ""){
testAjax(carBrandId); //testAjax方法中传入的是供应商的id编号
}else{
var carVendorSelect = document.getElementById("carVendorId");
var carVendorSelectLen = carVendorSelect.options.length;
for (var i=0; i<carVendorSelectLen; i++){
carVendorSelect.options[0] = null;
}

}
}
});
//testAjax方法根据传入的供应商的id,用jQuery的ajax将供应商的id传到后台

function testAjax(carBrandId){
document.getElementById("carVendorId").innerHTML ="";
jQuery.ajax({
url:"${ctx }/carmodel/toAddBrand", 
data:{'carBrandId':carBrandId}, 
type : 'POST',
dataType : "json", 
success : function(data) {
var obj=data.obj;
if (null == obj || obj.length == 0) {
$("#carVendorId").append('<option value=""> 暂时没有查询到匹配数据 </option>');
return ;
}
$("#carVendorId").append('<option value=""> 请选择车型 </option>');
$.each(obj, function(key, val) {
$("#carVendorId").append('<option value="' + val.id + '">' + val.vendorName + '</option>');
});
$('#carVendorId_sele').remove();//清空前一次选择后的下拉选框
$('#carVendorId').editableSelect({//调用可以输入的下拉选

});

},//success结束
error : function(XMLHttpRequest) {
alert(122);
}
});//.ajax结束

}

若只是单一下拉选想有手动输入功能Html5中有个datalist 标签配合input标签就能实现！