2

我正在构建一个基于 Spring MVC 的 webapp，我将在其中使用几个下拉菜单。

我想要完成的是，当用户选择一个可用选项时，该选项的描述将出现在选择标签旁边。

<select name="userType">
            <c:forEach items="${userTypes}" var="userType">
                <option>${userType.userType}</option>
            </c:forEach>
        </select><br/><br/>

在此旁边，我想要一个显示类似内容的字段

${userType.description}

对于下拉列表中的每个选项。

最好的方法是什么？

感谢任何花时间帮助我的人。

4

2 回答 2

2

你可以用javascript来实现它。我将在我的示例中使用jQuery 。

<select name="userType">
    <c:forEach items="${userTypes}" var="userType">
        <option value="${userType.userType}">${userType.userType}</option>
    </c:forEach>
</select>

<%-- hidden descriptions waiting to be shown. --%>
<c:forEach items="${userTypes}" var="userType">
    <div style="display:none" id="${userType.userType}" class="description">${userType.description}</div>
</c:forEach>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    $('select[name=userType]').change(function() {
        var userType = $(this).val()
        $('.description').hide();
        $('#' + userType).show();
    });
</script>

要记住的几件事：

  • 最初没有显示说明。如果需要，应该很容易修复。
  • 我假设在我的例子userType中是独一无二的。
  • 如果description或userType包含 html，它们可能会破坏您的标记。考虑使用<c:out>
于 2012-12-19T10:15:00.167 回答
1

这更像是一个javascript问题。好吧，您可以在服务器端做到这一点，但这将是矫枉过正。

我会使用 cleint 端 javascript 和 jquery，将 html/jsp 更改为

<select id="userType" name="userType">
  <c:forEach items="${userTypes}" var="userType">
    <option value=${userType.description}>${userType.userType}</option>
  </c:forEach>
</select><span id="myDivNextSelectTag></span><br/><br/>

...和jQuery

$("#userType").change(function(){
  $("#myDivNextSelectTag").html( $(this).value );
})

可能有一些语法错误，但你应该明白 - 你可以使用data html attribute而不是option value。

于 2012-12-19T10:14:41.950 回答