1

我正在使用 Spring MVC。我有一个基于从控制器调用的查询动态填充 2 个下拉列表的视图。我想根据第一个下拉选择动态运行查询以更改第二个下拉列表，这意味着再次访问控制器（我认为）。我可以从同一个视图多次访问控制器而不更改视图吗？例如，假设第一个下拉列表是美国各州的列表，第二个是所有美国城市的列表，如果我从第一个列表中选择 NC，我希望将第二个列表更改为仅包含 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

嗨@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 回答
1

神奇的词是 AJAX。

您的 JavaScript 函数需要向控制器发出 AJAX 请求，理想情况下，控制器应该返回一个 JSON 数据结构，其中包含第二个下拉菜单的值。然后，您的 JS 函数应该有一个回调，该回调从您的控制器中捕获 JSON，并通过操作 DOM 填充下拉 HTML。JQuery 是要走的路。网上有很多例子，随便搜一下。

于 2013-02-01T22:57:08.573 回答
0

One solution would be to move some of the data gathering out into a service, so your main controller could use the service to gather the data before sending to the view.

于 2013-02-01T23:24:54.363 回答