JSP cascading dropdown

See more:

Java

Ajax

jQuery

JSON

JSP

Hello everyone,
My question is about cascading dropdown in jsp with 2 dropdowns, where the second dropdown is based on selected value of the first. I am new to ajax,json,jquery,js and i can't fix the problem. Any help will be highly appreciated

My servlet code:

List<MeasuringPointParam> measuringPointParams = measuringPointParamManager.list(0);
        request.setAttribute("measuringPointParams", measuringPointParams);
 
        if (measuringPointCode == 7){
            measuringPointParams.subList(measuringPointParamCode = 5011, measuringPointParamCode = 5108);
        } else if (measuringPointCode == 509) {
            measuringPointParams.subList(measuringPointParamCode = 5109, measuringPointParamCode = 5113);
        } else if (measuringPointCode == 506) {
            measuringPointParams.subList(measuringPointParamCode = 5127, measuringPointParamCode = 5139);
        } else if (measuringPointCode == 507) {
            measuringPointParams.subList(measuringPointParamCode = 5140, measuringPointParamCode = 5152);
        } else if (measuringPointCode == 508) {
            measuringPointParams.subList(measuringPointParamCode = 5153, measuringPointParamCode = 5165);
        }
 
        JSONArray paramJSON = new JSONArray(measuringPointParams);
 
        String json = new Gson().toJson(paramJSON);
        response.setContentType("application/json");
        response.setCharacterEncoding("UTF-8");
        response.getWriter().write(json);
 
        getServletContext().getRequestDispatcher("/WEB-INF/pages/log-param-form.jsp").forward(request, response);
    }

My JSP code:

<script>
$(document).ready(function() {
 
$('#measuringPointCode').change(function(event) {
    var measuringPointCode = $("select#measuringPointCode").parse(json).val();
    $.get('LogParam', {  
        measuringPointCode : measuringPoint 
    }, function(jsonResponse) {
 
    var select = $('#measuringPointParamCode');  
    select.find('option').remove();
      $.each(jsonResponse, function(index, value) {
      $('<option>').val(value).text(value).appendTo(select);
      });
    });
    });
});
</script>

<div>
                        <label for="measuringPoint"><fmt:message key="measuringPoint"/>:</label>
                        <select class="ui-widget-content ui-corner-all" name="measuringPoint" id="measuringPoint" required>
                                <c:forEach items="${measuringPoints}" var="measuringPoint">
                                <option value="${measuringPoint.measuringPointCode}" ${measuringPoint.measuringPointCode == logParam.measuringPointParam.measuringPoint.measuringPointCode ? 'selected' : ''}>${measuringPoint.measuringPointName}</option>
                            </c:forEach>
                        </select>
                    </div>
 
              <div>
                        <label for="measuringPointParamCode"><fmt:message key="energyParam"/>:</label>
                        <select class="ui-widget-content ui-corner-all" name="measuringPointParamCode" id="measuringPointParamCode" required>
                            <c:forEach items="${measuringPointParams}" var="measuringPointParam">
                                <option value="${measuringPointParam.measuringPointParamCode}" ${measuringPointParam.measuringPointParamCode == logParam.measuringPointParam.measuringPointParamCode ? 'selected' : ''}> ${measuringPointParam.energyParam.energyParamName}</option>  
                            </c:forEach>
                        </select>
                    </div>

What I have tried:

The problem is that Gson can't handle circular references in the serialized data. I will be thankfull for any help or suggestions.