Question

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

我想要完成的是，当用户选择其中一个可用选项时，该选项的说明将显示在select-tag旁边。

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

接下来我希望有一个显示类似

的字段

${userType.description}

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

最好的方法是什么？

感谢任何人抽出时间帮助我。

Answer 1

你可以用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>

Answer 2

这是一个javascript问题。你可以用服务器端做到这一点，但它会有点过分。

我会使用cleint side 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。

动态响应select中的变化

2 个答案: