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

我的个人目标是：

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

字符串名；
列出技能//吸气剂设定器

当jsp第一次加载时，我从@modeldattribute获取下拉值，如下所示：

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

List personInfo=personService.getinformation（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>

“${var.name}”/>
“${skill}”/>

---

所以现在我该怎么做：如果用户在第一个下拉列表中更改了名称，那么第二个下拉列表值必须根据所选人员的技能自动更改。我正在使用Spring 4、maven、JSTL、jQuery、javascript和Spring表单标记。这都是客户端的问题。在这里，我们不会使用name参数进行任何ajax调用，以获取技能值并在下拉列表中显示。请提供帮助。谢谢

您只需要一个拥有所有名称和技能的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>

var peopleSkills={}；
peopleSkills['${person.name}']=new Array（）；
peopleSkills['${person.name}].push（'${skill}'）；
函数updateSkills（名称）{
var skillsArray=peopleSkills[name]；
var标记=“”
对于（var i=0；i

---

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

您只需要一个具有所有名称和技能的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>

var peopleSkills={}；
peopleSkills['${person.name}']=new Array（）；
peopleSkills['${person.name}].push（'${skill}'）；
函数updateSkills（名称）{
var skillsArray=peopleSkills[name]；
var标记=“”
对于（var i=0；i

---

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

您只需要一个具有所有名称和技能的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>

var peopleSkills={}；
peopleSkills['${person.name}']=new Array（）；
peopleSkills['${person.name}].push（'${skill}'）；
函数updateSkills（名称）{
var skillsArray=peopleSkills[name]；
var标记=“”
对于（var i=0；i

---

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

您只需要一个具有所有名称和技能的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>

var peopleSkills={}；
peopleSkills['${person.name}']=new Array（）；
peopleSkills['${person.name}].push（'${skill}'）；
函数updateSkills（名称）{
var skillsArray=peopleSkills[name]；
var标记=“”
对于（var i=0；i$('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));
          });
    });         
 });

<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>