javascript - 如何在 Spring 中使用 JSTL 在下拉列表中显示数据?

标签 javascript jquery spring jsp jstl

我有 PersonDTO 对象,其中包含:

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

当第一次加载 jsp 时,我从 @ModelAttribute 获取下拉值,如下所示:

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 表单标签。这都是客户端。这里我们没有使用名称参数进行任何 ajax 调用来获取技能值并将其显示在下拉列表中。请帮忙。谢谢

最佳答案

您只需要一个包含所有名称和技能的 javascript 对象,因此当名称更改时,技能已经在客户端可用。通常,您最好通过将列表序列化为 Controller 中的 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>

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

关于javascript - 如何在 Spring 中使用 JSTL 在下拉列表中显示数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25692790/

相关文章:

javascript - 选择并删除所有匹配的数据属性

java - 使用 Spring Data 时,我应该如何注册自定义 Hibernate 5 数据类型(BasicType)?

javascript - 通过依赖注入(inject)在 Controller 之间传递 $routeParams

javascript - 使用自动完成功能时无法在 javascript 中设置变量

javascript - 如何返回传入回调函数的两个数字

javascript - Spring roo——包括 jQuery

java - 如何在 Spring 上配置 SSL/HTTPS?

javascript - 在使用 substr 制作句子计数器时遇到问题

jquery - 如何使用 css 在图像底部设置文本

jquery - read() 工作,在 ('ready' 上)不工作,为什么?