jQuery 및 JSP를 사용하여 동적 드롭 다운 목록을 생성하는 방법은 무엇입니까?

각 요소에 B 유형의 다른 목록이 들어있는 유형 A 목록이 있습니다. 사용자가 A 값을 포함하는 드롭 다운 목록에서 값을 선택할 때 다른 항목을 채우는 양식을 만들고 싶습니다. 선택한 항목의 Type B 목록을 기반으로 한 값입니다. jQuery를 처음 사용하지만 pure jsp 대신 jQuery를 사용하면 편리하다는 것을 알고 있습니다. 이 작업을 수행하기 위해 따라야 할 단계의 대략적인 개요를 알려주십시오.jQuery 및 JSP를 사용하여 동적 드롭 다운 목록을 생성하는 방법은 무엇입니까?

출처

2010-05-24 sanjayav

JSP는 서버 측보기 기술 일뿐입니다. jQuery와 경쟁하지 않습니다. 이를 위해 JSP를 완벽하게 사용할 수 있습니다. 하지만 동기식 요청이 아닌 비폭력적인 기술을 사용하여 비동기 요청을 실행하고 싶다고 생각합니다. JSP에서도 마찬가지입니다.

첫째, 우리는 JSP에서 두 개의 드롭 다운이 필요합니다 :

<select id="dropdown1"> 
    <c:forEach items="#{bean.items}" var="item"> 
     <option value="#{item.value}">#{item.label}</option> 
    </c:forEach> 
</select> 
<select id="dropdown2"> 
    <option>Please select dropdown1</option> 
</select>

그런 다음 우리가 첫 번째 드롭 다운의 값에 따라 두 번째 드롭 다운을 채우도록 change 이벤트에 일부 jQuery를 연결해야합니다. 는 JSP에서 <script> 또는 JSP에서 <script src>를 통해로드 외부 스크립트에 다음을 추가

$(document).ready(function() { 
    $('#dropdown1').change(function() { 
     var selectedValue = $(this).val(); 
     var servletUrl = 'dropdown2options?value=' + selectedValue; 

     $.getJSON(servletUrl, function(options) { 
      var dropdown2 = $('#dropdown2'); 
      $('>option', dropdown2).remove(); // Clean old options first. 
      if (options) { 
       $.each(opts, function(key, value) { 
        dropdown2.append($('<option/>').val(key).text(value)); 
       }); 
      } else { 
       dropdown2.append($('<option/>').text("Please select dropdown1")); 
      } 
     }); 
    }); 
});

을 /dropdown2options의 url-pattern 뒤에 서블릿에서 단지 JSON으로 옵션의 맵을 반환합니다. 이 경우 Gson을 사용할 수 있습니다.

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
    String selectedValue = request.getParameter("value"); 
    Map<String, String> options = optionDAO.find(selectedValue); 
    String json = new Gson().toJson(options); 
    response.setContentType("application/json"); 
    response.setCharacterEncoding("UTF-8"); 
    response.getWriter().write(json); 
}

기본적으로 모두입니다.

출처

2010-05-24 20:11:35 BalusC

나는 비슷한 질문에 대답했다 chained selectors here ... jsp에 대해 잘 모르지만이 jQuery 버전은 아이디어를 제공해야한다.

출처

2010-05-24 13:00:24 Mottie

jQuery 및 JSP를 사용하여 동적 드롭 다운 목록을 생성하는 방법은 무엇입니까?

답변

관련 문제