How to narrow select/option values based on previous select/option field?

Question

I have a form in which user needs to choose several options. In first select option user chooses region and then executors that operate in the region, user chose. I tried the following code:

    <select name="region" form="addRequest" id="region">
        <c:forEach var="Region" items="${regions}">
            <option value="${Region}">${Region}</option>
        </c:forEach>
    </select>



<select name="executor" form="addRequest">
    <c:forEach var="executor" items="${executorData}">
        <c:if test="${executor.getField4() eq region}">
            <option value="${executor.getField1()}">${executor.getField1()}</option>
        </c:if>
    </c:forEach>
</select>

But when launched on a page i have empty options.

Answer 1

This is not going to work. When you select a region value in the first <select>, you don't submit it to your server side code before the second <select> tries to access the value of region. So, unless region is pre-populated, this is going to be a nullvalue.

To solve your problem, try to use JavaScript/jQuery.