I am currently working on implementing two dropdown menus in my JSP. The first dropdown is for top categories and the second dropdown is for subcategories. When the JSP page loads initially, only the list of top categories will be displayed in the first dropdown while the second dropdown will remain empty. Upon selecting a top category from the first dropdown, I want the corresponding subcategories to populate the second dropdown. Fortunately, upon the initial load of the JSP page, I already have access to a databean that contains both the top category and subcategory lists. This means that when a top category is selected, I need to extract the value of the selected category and compare it with the top category list present in the databean. Then I can populate the second dropdown with the relevant subcategories. Can someone please guide me on how to achieve this? Thank you in advance. I have included my code snippet below 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>