1

Spring MVC を使用しています。コントローラーから呼び出されたクエリに基づいて、2 つのドロップダウン リストを動的に設定するビューがあります。最初のドロップダウンの選択に基づいてクエリを動的に実行して、2 番目のドロップダウンを変更したいと考えています。これは、コントローラーに再度アクセスすることを意味します (と思います)。ビューを変更せずに、同じビューからコントローラーに複数回アクセスできますか? たとえば、最初のドロップダウンが米国の州のリストで始まり、2 番目のドロップダウンがすべての米国の都市のリストとして始まったとします。最初のリストから NC を選択した場合、2 番目のリストを変更して NC の都市のみを含めるようにします。 .

最初のドロップダウンの例を次に示します。

<select name = "states" onChange = "populateCityList(this.options[this.selectedIndex].value)">
            <option value ="*">All States</option>
            <c:forEach items="${states}" var ="state">
                <option value ="${state}">${state}</option>

かなり簡単ですが、そこからどこに行くべきか本当にわかりません。現在、現在のビュー内でJavascript関数を呼び出していますが、それが正しいかどうか、またはその関数内で何をすべきかさえわかりません。

4

3 に答える 3

1

魔法の言葉は AJAX です。

JavaScript 関数は、コントローラーに対して AJAX 要求を行う必要があります。コントローラーは、理想的には、2 番目のドロップダウンの値を含む JSON データ構造を返す必要があります。次に、JS 関数には、コントローラーから JSON をキャッチし、DOM を操作してドロップダウン HTML を設定するコールバックが必要です。JQueryがその方法です。ウェブ上にたくさんの例がありますので、検索してみてください。

于 2013-02-01T22:57:08.573 に答える
1

こんにちは@ user2033734次のようなことができます：

JQueryコード

$(document).ready(function() {
 $("#id1").change(function () {
    position = $(this).attr("name");
    val = $(this).val()
    if((position == 'id1') && (val == 0)) {
        $("#id2").html('<option value="0" selected="selected">Select...</option>')
    } else {
        $("#id2").html('<option selected="selected" value="0">Loading...</option>')
        var id = $("#id1").find(':selected').val()
        $("#id2").load('controllerMethod?yourVariable=' + id, function(response, status, xhr) {
            if(status == "error") {
                alert("No can getting Data. \nPlease, Try to late");
            }
        })
    }
 })
})

そしてJSP内

<table style="width: 100%;">
<tr>    
    <td width="40%"><form:label path="">Data 1: </form:label></td>
    <td width="60%">
        <form:select path="" cssClass="" id="id1">
            <form:option value="" label="Select..." />
            <form:options items="${yourList1FromController}" itemValue="id1" itemLabel="nameLabel1" />
        </form:select>
    </td>
</tr>
<tr>
    <td width="40%"><form:label path="">Data 2: </form:label></td>
    <td width="60%">
        <form:select path="" cssClass="" id="id2">
            <form:option value="" label="Select..." />
            <form:options items="${yourList2FromController}" itemValue="id2" itemLabel="nameLabel2" />
        </form:select>
    </td>
</tr>
</table>

私はあなたを助けることを願っています:)

于 2013-02-02T03:50:40.487 に答える
0

1 つの解決策は、収集するデータの一部をサービスに移動することです。これにより、メイン コントローラーはサービスを使用して、ビューに送信する前にデータを収集できます。

于 2013-02-01T23:24:54.363 に答える