2

いくつかのドロップダウンメニューを使用するSpringMVCベースのWebアプリを構築しています。

私が達成しようとしているのは、ユーザーが使用可能なオプションの1つを選択すると、そのオプションの説明が選択タグの横に表示されることです。

<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一意であると想定しています。
  • HTMLが含まれている場合description、userTypeマークアップが破損する可能性があります。使用を検討してください<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 に答える