jsp中的从属下拉列表

Question

I am having two dropdown in my JSP. One is for topcategories and the other is for subCategories. When my JSP page initially loads it will contain only the topcategories list in first drop down box and the second drop down will be empty. When I select topcategory from first dropdown its corresponding subcategories should be populated in the second dropdown. During my initial load of jsp itself I will get the databean which conists of both topcategory and subcategory list. So when the topcategory is selected i should get the value of topcategory selected and I have to compare it with the topcategory list present in databean and need to populate the corresponding subcategories in the second drop down. How to do this plz help me. Thanks in advance. I have shared my code for reference.

<div class="selectbox01">
                <select name="make" id="make" onchange="loadModel()">

                    <c:forEach var="topCategory" items="${catalog.topCategories}" varStatus="status">
                    <option selected="selected"></option>
                    <option value="${topCategory.categoryId}"><c:out value="${topCategory.description.name}"/></option>
                    </c:forEach>
                </select>
            </div>
            <c:set var="make" value="${WCParam.make}"/>
            <div class="selectbox01">
                <select name="model" id="model">
                <option selected="selected"></option>
                <c:forEach var="topCategory" items="${catalog.topCategories}" varStatus="status">
                <c:if test="${topCategory.categoryId == make}">
                <c:forEach var="subTopCategory" items="${topCategory.subCategories}" varStatus="status2"> 
                    <option value="${subTopCategory.categoryId}">
<c:out value="${subTopCategory.description.name}"/></option>
                   </c:forEach>
                   </c:if>
                     </c:forEach>

                </select>
            </div>

Answer 1

One way to do it is to make a javascript object representing "catalog" bean.Then write a onchange handler bound to the topcategories dropdown which uses "catalog" object in javascript to get the javascript array of subcatagories.

Breaking this down to steps:

Step 1: Make a javascript object representing "catalog" bean: An easy way to do this is to override toString() method of Catalog bean and return a JSON object representing the bean. OR Use Jackson api to convert Catalog object to JSON String. After you have done it hold the json in a javascript variable. eg in your jsp write this:

<script type="text/javascript"> var catalogJson = ${catalog};</script>

Step 2: Write loadModel function in javascript which uses "catalogJson" variable to get the subcatagories and populate them in the other dropdown.

I have eleminated some of the details but most of it is straightforward I guess.