JSP级联下拉列表 [英] JSP cascading dropdown

问题描述

大家好，

我的问题是关于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 >  < span class =code-keyword><   fmt：message     key   =  measuringPoint  /  > ：<   / label  >  
 <  选择    class   =  ui-widget-content ui-corner-all    name   =  measuringPoint     id   = < span class =code-keyword> measuringPoint    required  >  
 <   c：forEach    项目  =  $ {measuringPoints}    var   =  measuringPoint >  
 <   option     value   =  $ {measuringPoint.measuringPointCode}    $ {measuringPoint.measuringPointCode     =   =   logParam.measuringPointParam.measuringPoint.measuringPointCode    ？   selected   ：   ''}  >  $ {measuringPoint.measuringPointName} <   / option  >  
 <   / c：forEach  < span class =code-keyword>>  
 <   / 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 >  
 <  <跨班=code-leadattribute>选项    value   =  $ {measuringPointParam.measuringPointParamCode}    $ {measuringPointParam.measuringPointParamCode     =   =   logParam.measuringPointParam.measuringPointParamCode    ？   'selected'   ：   ''}  >  $ {measuringPointParam.energyParam.energyParamName} <   / option  >  
 <   / c：forEach  >  
 <  < span class =code-leadattribute> / 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 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.

解决方案

(document).ready(function() {

('#measuringPointCode').change(function(event) { var measuringPointCode =

("select#measuringPointCode").parse(json).val();

这篇关于JSP级联下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！