Question

在用户在第一个下拉列表中进行选择后，我会动态填充第二个下拉列表。问题是，当我在第一个下拉列表中更改选择时，它会在第二个下拉列表中不断添加空选项。

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;
    }

}

Answer 1

它对我有用。

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＃在依赖元素中。相应地更改名称。

在更改选择中，空选项将添加到选择标记

1 个答案: