使用jQuery+ajax實現級下拉列表的級聯顯示
html部分程式碼為下拉列表新增onchange事件
<div class="form-group" style="margin-right: 0">
<label for="inputEmail3" class="col-sm-3 control-label" style="width: 170px; padding-top: 0">製造廠商:</label>
<div class="col-sm-5">
<select name="factory" id="select" class="form-control post_select"
onchange
<c:forEach items="${list}" var="item" >
<option value="${item.manufacturerId}">${item.manufacturerName}</option>
</c:forEach>
</select>
</div>
</div>
<div class="form-group" style="margin-right: 0">
<label for="inputEmail3" class="col-sm-3 control-label" style="width: 170px; padding-top: 0">型號規格:</label>
<div class="col-sm-5">
<select name="model" id="model" class="form-control post_select" >
</select>
</div>
</div>
jQuery部分程式碼,還需要在頁面初始化的時候就呼叫該方法載入一遍
var manufacturerId = $("#select").val();
page.change(manufacturerId);
page.change=function(manufacturerId){
$.ajax({
url:"${ctx }/psdj/change",
type:'get',
async:true,
cache:false,
data:{
"id":manufacturerId
},
success:function(data){
var items = data.model;
var selectModel = $("#model");
selectModel.empty();
if(items!=null){
for(var i in items){
var item = items[i];
selectModel.append("<option value = '"+item.modelId+"'>"+item.modelName+"</option>");
$("#model").val('${vo.model}');
}
}
else{
selectModel.empty();
}
}
});
}
如果需要第二個下拉列表回顯值,則需要在