我有两个下拉列表
一个是
<select data-placeholder="Menu" name="menu" required data-rel="chosen" required id="menu">
<c:if test="${not empty menuList}">
<optgroup label="Choose one from below">
<c:forEach var="thisMenu" items="${menuList}">
<option value="${thisMenu.id}" <c:if test="${menu.id == thisMenu.id}">selected</c:if>>${thisMenu.name}</option>
</c:forEach>
</optgroup>
</c:if>
</select>
,第二个是
<div class="controls">
<select data-placeholder="Category" name="category" id="category" required data-rel="chosen" required>
<c:if test="${not empty menu1.categories}">
<optgroup label="Choose one from below">
<c:forEach var="thisCategory" items="${menu1.categories}">
<option value="${thisCategory.id}" <c:if test="${categoryId == thisCategory.id}">selected</c:if>>${thisCategory.name}</option>
</c:forEach>
</optgroup>
</c:if>
</select>
</div>
我的ajax电话是
$(document).ready(function() {
$('#menu').on('change', function() {
var elt = document.getElementById("menu");
var menuId = elt.options[elt.selectedIndex].value;
alert("menuId : " + menuId);
$.ajax({
type: "GET",
url: "/superadmin/product/ajaxupdatecategories",
data: ({menu:menuId}),
dataType: "json",
success: function(response){
alert("response : " + response.categoryList);
$("#category").get(0).options.length = 0;
$.each(response.categoryList, function(index, item) {
alert(index + " category : " + item.name);
$("#category").get(0).options[$("#category").get(0).options.length] = new Option(item.id, item.name);
});
},
error: function() {
$("#category").get(0).options.length = 0;
}
});
});
})
问题是我从ajax获取新类别但类别下拉选项没有改变。 请纠正我的错误。