dependent select options one on another one

Question

Good morning all, i have a piece of code which looks heavy for me, i would like to go with light code. my task is about to select states and the cities using two dropdown boxes. i need to change city dropdown box with respect to states dropdown box, help me on this

here my code:::

<fieldset>
    <legend>Compare To</legend>
    <span>state</span><select id="locationId" name="locationId">
    <option value="0" <c:if test="${loc.location eq '0'}">selected="selected"</c:if>>All Locations</option> 
    <c:forEach items="${locationDetailsList}" var="locationDetails">
        <option value="${locationDetails.locationId}" <c:if test="${loc.locationId2 eq locationDetails.locationId}">
        selected="selected"</c:if>>${locationDetails.locationName}</option>
    </c:forEach></select>

    <span>area</span> 
    <select id="area" name="area">
        <option value="0" <c:if test="${locationId eq '0'}">selected="selected"</c:if>>All Locations</option> 
        <option value="1" <c:if test="${locationId ge '1'}">selected="selected"</c:if>>Hyderabad</option>
        <option value="1" <c:if test="${locationId ge '1'}">selected="selected"</c:if>>Vizag</option>
    </select> 
</fieldset>

thx in advance dear frnds...

score 0 · Accepted Answer · edited May 23 '17 at 12:04

From the answer to this question: JSTL in JSF2 Facelets... makes sense?, JSTL tags (...) are executed during view build time, this means that they are evaluated only one time when building the HTML to be rendered to the client.

Knowing this, you can only update the data in your <select id="area"> only by doing a full request/response to the server to load the values based on the value of your <select id="locationId"> component.

In this times, it's heavily painful to make users get a totally new response just with the elements of a dropdownlist, so you can use an Ajax approach as shown here: How to use Servlets and Ajax? Note that BalusC even writes a full example about building an <option> list based on a Map<String, String> in the Here's another example which displays Map<String, String> as <option> part.

Remember that for the ajax solution, your <select id="area"> should not have any JSTL tag inside, it should not have any element at all:

<select id="area">
</select>

dependent select options one on another one

1 Answers1