在用户在第一个下拉列表中进行选择后,我会动态填充第二个下拉列表。问题是,当我在第一个下拉列表中更改选择时,它会在第二个下拉列表中不断添加空选项。
jsp文件
<%@ include file="/WEB-INF/template/taglibs.jsp"%>
<div class="container">
<%@ include file="/WEB-INF/jsp/client/client_menu.jsp" %>
<div class="btn-group budgetTable">
<button type="button" class="btn btn-warning buttons pnc-buttons">Previous</button>
<button type="button" class="btn btn-warning buttons pnc-buttons">Current
</button>
<button type="button" class="btn btn-warning buttons pnc-buttons">Next</button>
</div>
<form:form commandName="modayForm" method="post"
class="form-horizontal form-width addbtn">
<fieldset class="fieldset-margin">
<legend>Monday</legend>
<div class="form-group">
<label for="select" class="col-lg-2 control-label">Category</label>
<div class="col-lg-10">
<select name="idCategory" class="form-control idCategory">
<option value="0">Select category</option>
<c:forEach items="${categories}" var="category">
<option value="${category.text}">${category.value}</option>
</c:forEach>
</select>
</div>
</div>
<div class="form-group">
<label for="select" class="col-lg-2 control-label">Meal</label>
<div class="col-lg-10">
<select name="idMeal" class="form-control idMeal">
<option value="0">Select meal</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<a class="btn btn-warning buttons generate"
href="http://localhost:8080/Catering/index/pdf">Submit </a>
</div>
</div>
<legend> </legend>
</fieldset>
</form:form>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('form').each(function(){
var ddlCategories = $(this).find('.idCategory');
var ddlMeals = $(this).find('.idMeal');
ddlCategories.change(function(){
ddlMeals.find('option').each(function(){
if($(this).val() != 0){
$(this).remove();
}
});
var id = ddlCategories.val();
if(id != 0){
$.ajax({
type: "get",
url : "http://localhost:8080/Catering/index/populateMeals",
data: {categoryId : id },
success : function(response){
for(var i = 0; i < response.length; i++){
ddlMeals.append('<option value='+ response[i].text + '>' + response[i].value + '<option>');
}
}
});
}
});
});
});
</script>
ClientController.java
package catering.web.controller;
import java.util.ArrayList;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import catering.web.data_access.MealDataAccess;
import catering.web.helper.DropDownListItem;
import catering.web.model.Meal;
@Controller
public class ClientController {
@RequestMapping(value = "populateMeals", method = RequestMethod.GET)
public @ResponseBody List<DropDownListItem> populateMeal(int categoryId){
List<DropDownListItem> items = new ArrayList<DropDownListItem>();
List<Meal> meals = MealDataAccess.getMealsByCategory(categoryId);
for(Meal meal : meals){
DropDownListItem item = new DropDownListItem(Integer.toString(meal.getIdMeal()), meal.getShortName());
items.add(item);
}
return items;
}
}
DropDownListItem.java
package catering.web.helper;
public class DropDownListItem {
private String text;
private String value;
public DropDownListItem(String t, String n) {
text = t;
value = n;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public String getValue() {
return value;
}
public void setValue(String value) {
this.value = value;
}
}
答案 0 :(得分:-2)
它对我有用。
function cascadeSelect(parent, child){
var childOptions = child.find('option:not(.static)');
child.data('options',childOptions);
parent.change(function(){
childOptions.remove();
child
.append(child.data('options').filter('.sub_' + this.value))
.change();
})
childOptions.not('.static, .sub_' + parent.val()).remove();
}
$(function(){
cascadeForm = $('.cascadeTest');
groupID = cascadeForm.find('.groupID');
teamID = cascadeForm.find('.teamID');
userID = cascadeForm.find('.userID');
//locSelect = cascadeForm.find('.locSelect');
cascadeSelect(groupID, teamID);
});
在第一个选项元素中输入class =“groupID”。 和class =“sub_#groupID#在依赖元素中。 相应地更改名称。