JSP级联下拉列表

本文介绍了JSP级联下拉列表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 大家好， 我的问题是关于jsp中的级联下拉有2个下拉列表，其中第二个下拉列表基于第一个下拉列表的选定值。我是ajax，json，jquery，js的新手，我无法解决问题。任何帮助将非常感谢 我的servlet代码： 列表与LT; 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）; } 我的JSP代码： <脚本> $（ document ）。ready（ function （）{ $（' #measurementPointCode'）。change（ function （事件）{ var measuringPointCode = $（ select #measuretingPointCode）。parse（json）.val（）; $ .get（' LogParam'，{ measuringPointCode：measuringPoint }， function （jsonResponse）{ var select = $（' #measuringPointParamCode'）; select.find（' option'）。 remove（）; $ .each（jsonResponse， f unction （index，value）{ $（' < option>'）VAL（值）的.text（值）.appendTo（选择）。 }）; }）; }）; }）; < / script> < div > < label for = measuringPoint > < fmt：message key = measuringPoint / > ：< / label > < 选择 class = ui-widget-content ui-corner-all name = measuringPoint id = measuringPoint required > < c：forEach 项目 = $ {measuringPoints} var = measuringPoint > < option value = $ {measuringPoint.measuringPointCode} $ {measuringPoint.measuringPointCode = = logParam.measuringPointParam.measuringPoint.measuringPointCode ？ selected ： ''} > $ {measuringPoint.measuringPointName} < / option > < / c：forEach > < / select > < / div > < div > < 标签 = measuringPointParamCode > < fmt：message key = energyParam / > ：< / label > < 选择 class = ui-widget- content ui-corner-all name = measuringPointParamCode id = measuringPointParamCode required > < c：forEach items = $ {measuringPointParams} var = measuringPointParam > < 选项 value = $ {measuringPointParam.measuringPointParamCode} $ {measuringPointParam.measuringPointParamCode = = logParam.measuringPointParam.measuringPointParamCode ？ 'selected' ： ''} > $ {measuringPointParam.energyParam.energyParamName} < / option > < / c：forEach > < / select > < / div > 我尝试过： 问题是Gson无法处理序列化数据中的循环引用。我将感谢任何帮助或建议。解决方案 （ document ）。ready（ function （）{ （' #measuringPointCode'）。change（ function （event）{ var measuringPointCode = （ select #measurementPointCode）。解析（JSON）.VAL（）; 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 appreciatedMy 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. 解决方案 (document).ready(function() {('#measuringPointCode').change(function(event) { var measuringPointCode =("select#measuringPointCode").parse(json).val(); 这篇关于JSP级联下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 阿里云证书，YYDS！