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标签就能实现!