Question

我正在使用两个<s:select>标记，并且java集合List位于其list属性中。

更改我要填充第二个下拉列表的那个。我已经使用了jQuery，它被称为动作bean，并在返回时使用JSON响应填充列表，然后在第二个下拉列表中设置值。一切都很好。 JQuery代码如下所示。

$(document).ready(function () {
    $('#projectNameBox').change(function (event) {
        var projectNameBoxVal = $("select#projectNameBox").val();
        alert(projectNameBoxVal);
        $.getJSON('getPackageListAction.action', {
            "projectId": projectNameBoxVal
        }, function (jsonResponse) {
            alert(jsonResponse);
            var packageNameSelectBox = $('#packageNameBox');
            packageNameSelectBox.find('option').remove();
            $.each(jsonResponse, function (key, value) {
                $('<option>').val(key).text(value).appendTo(packageNameSelectBox);
            });
        });
    });
});

现在我担心的是，当我通过调用第一个更改操作来更新第二个支持列表时，为什么我必须使用下面的代码来设置选项数据。

var packageNameSelectBox = $('#packageNameBox');
packageNameSelectBox.find('option').remove();
$.each(jsonResponse, function (key, value) {
    $('<option>').val(key).text(value).appendTo(packageNameSelectBox);
});

我们可以刷新组件以反映支持列表的变化吗？

Answer 1

select组件（与页面中的任何其他对象一样）对其创建方式一无所知。生成组件后，它与服务器端不再有任何类型的连接。

然后你需要改变它的HTML（以及DOM）以对其进行更改，没有像刷新一堆文本的“html keywords”

通过为程序员提供更简单的界面，有些工具可以隐藏这种复杂性（无论您已经处理过，如果代码来自您而不是来自同事）。他们在幕后做同样的事情，但他们会为你节省工作。

一个例子是Struts2-jquery-plugin; take a look at the code for a double select

考虑到使用插件，你需要继续使用S2技术，而学习原始jQuery将在未来改变框架（JSF2，SpringMVC，ecc）甚至语言/平台（C＃/ .NET，等...）。

Answer 2

该代码用于修改第二个select对象的HTML DOM元素，以反映数据模型中的更改。如果它是双重选择方案，那么您应该重新填充第二个选择的数据并将其返回到json结果中。

当您通过第一个选择框选择选项时，您在Ajax调用中传递参数projectId，该调用应由value属性中的第一个select设置。此参数设置为action属性，可用于重新填充第二个选择框的地图。

数据是通过一对多关系（Project＆lt; - Package）进行的，因此您可以为单个项目提供不同的包。

设置projectId的参数后，您只能查询属于该项目id的包等于包projectId的包。

当第二个选择框的数据准备好后，您将返回json结果，该结果将与第二个选择框对应的属性序列化为JSON对象。

每个选择框应该有不同的操作属性。这有助于限制json输出仅序列化第二个选择框的属性。

一旦JSON返回给客户端，那么你需要修改第二个选择框的DOM，它只是不能从你在Ajax回调中收到的JSON中更新自己。

您可以使用代码示例查看问题：Populating one select menu based on another select menu using AJAX in Struts2。

在Struts 2中更改后备Java集合时刷新<s：select>标记</s：select>

2 个答案: