如何在spring中使用JSTL在dropwdowns中显示数据？

Question

我有有PersonDTO对象：

String name; 
List<String> skills;//getter setter 

时，第一次我得到下拉值从@ModelAttribute这样的JSP负载：

List<PersonDTO> personInfo= personService.getInfomation(id);  
model.addAttribute("personInfo",personDTO); 

和JSP显示：

<div> 
<form:select name="name" path="name"> 
<c:forEach items="${personInfo}" var="var"> 
<form:option value="${var.name}">"${var.name}" /></form:option> 
</c:forEach> 
</form:select> 
<div> 
<div> 
<form:select name="skills" path="skills"> 
<c:forEach items="${personInfo.skills}" var="skill"> 
<form:option value="${skill}">"${skill}" /></form:option> 
</c:forEach> 
</form:select> 
<div> 

所以现在我该如何做到这一点：如果用户在第一个下拉列表中更改名称，则第二个下拉值必须根据前夕自动更改所选人员拥有的技能。我使用Spring 4，Maven，JSTL，jQuery，JavaScript和Spring表单标记。这是所有客户端。在这里，我们没有使用name参数进行任何ajax调用来获取技能值并将其显示在下拉列表中。请帮助。谢谢

Answer 1

您只需要一个拥有所有名称和技能的JavaScript对象，因此当名称更改时，技能已经在客户端可用。通常情况下，通过将列表序列化到控制器中的JSON字符串来完成此操作会更好，但为了避免告诉您在项目中添加像Gson这样的新依赖项，您可以通过在脚本标记中填充JavaScript对象来实现此目的。

<script type="text/javascript"> 
    var peopleSkills = {}; 

    <c:forEach var="person" items="${personInfo}"> 
     peopleSkills['${person.name}'] = new Array(); 
     <c:forEach var="skill" items="${person.skills}"> 
      peopleSkills['${person.name}'].push('${skill}'); 
     </c:forEach> 
    </c:forEach> 

    function updateSkills(name) { 
     var skillsArray = peopleSkills[name]; 
     var markup = '' 
     for (var i = 0; i < skillsArray.length; i++) 
      markup += '<option value="' + skillsArray[i] + '">' + skillsArray[i] + '</option>'; 
     $('#skillsselect').html(markup);    
    } 

    $(document).ready(function(){ 
     updateSkills($('#nameselect').val()); // for initial option on page load 

     $('#nameselect').change(function(){ 
      var personName = $(this).val(); 
      updateSkills(personName); 
     }); 
    }); 
</script> 

<div> 
    <form:select name="name" id="nameselect" path="name"> 
     <c:forEach items="${personInfo}" var="var"> 
      <form:option value="${var.name}">"${var.name}" /></form:option> 
     </c:forEach> 
    </form:select> 
<div> 
<div> 
    <form:select name="skills" id="skillsselect" path="skills"></form:select> 
<div> 

肯定会考虑在控制器中创建一个JSON字符串，以避免混合脚本标记中的服务器端和客户端代码。同时也为两个不同的人具有相同名字的情况做好准备。

Answer 2

没有必要的<c:foreach遍历所有选项的，而不是采用弹簧<form:options标签，如：

正在考虑您的PersonDTO类具有ID和名然后，

<form:select id="name" path="name"> 
    <option value="0">--select--</option> 
    <form:options items="${personInfo}" itemLabel="name" itemValue="id"> 
</form:select> 

simillarly技能：

<form:select id="skills" path="skills"> 
    <form:options items="${personInfo.skills}"> /> 
</form:select> 

加载选定人员的技能，做一个AJAX获取请求，从控制器返回的人的技能的人，以人为本的ID，如ID到控制器：在控制器

GET处理方法是这样的：

@RequestMapping(value="/{personId}/getSkills", method=RequestMethod.GET, 
     consumes=MediaType.APPLICATION_JSON_VALUE, 
     produces=MediaType.APPLICATION_JSON_VALUE) 
public @ResponseBody List<Skills> getSkills(@PathVariable("personId")Integer personId){ 

    List<Skills> personSkills = personService.getPersonSkills(personId); 
    return personSkills; 
} 

Ajax调用会像：

$('select#name').change(function(){ 
    $.getJSON('/'+$('select#name option:selected').val()+'/getSkills', function(skills) { 
     $('select#skills').empty(); //first remove existing options then append new options 
     $.each(skills, function(key, val) { 
      $('select#skills').append($("<option></option>") 
        .attr("value",key) 
        .text(val)); 
      }); 
    });   
}); 

注：激活添加@ResponseBody和<mvc:annotation-driven/>也Jackson mapper或任何其他映射器应该可以构建路径上，以工作JSON序列化和deserializ即

另请参见：

• jQuery的$.getJSON
• how to return object from controller to ajax in spring mvc

编辑：根据您的评论的解决方案将是

<script type="text/javascript"> 
    var peopleSkills = {}; 

    <c:forEach var="person" items="${personInfo}"> 
     peopleSkills['${person.name}'] = new Array(); 
     <c:forEach var="skill" items="${person.skills}"> 
      peopleSkills['${person.name}'].push('${skill}'); 
     </c:forEach> 
    </c:forEach> 

    $('select#name').change(function(){ 
     var skills = peopleSkills[$(this).val()]; 
     console.log($(this).val()+' has: '+JSON.stringify(skills)); 
     $('select#skills').empty(); 
     $.each(skills, function(key, val) { 
      $('select#skills').append($("<option></option>") 
         .attr("value",val) 
         .text(val)); 
     }); 
    }); 
</script>