Question

我正在开发一个struts2项目，我有3个html选择控件，每个控件都依赖于之前的选择。假设第一个选择用于国家，第二个用于州，第三个用于城市。状态选择中的选项列表将被过滤以仅显示该国家/地区的状态，依此类推。由于一些其他限制，我使用基本的html选择控件而不是struts2的。以下是我目前如何填充选择的示例：

<select id="stateSelect"  name="selectedState">
<s:iterator value="#session['myModel'].states" status="itr">
     <option value="<s:property value="code"/>">
      <s:property value="label"/>
</option>
</s:iterator>
</select>

我认为我需要做的是onchange事件执行ajax调用以根据所选的“国家/地区”检索“状态”列表。问题是：
1.如何使用jquery执行此ajax调用？
2.我需要传递什么作为ajax调用的url？只是动作名称？
3.我如何解析结果？从java代码我可以返回具有“代码”和“标签”以及其他属性的“状态”对象列表。如何在javascript中解析此列表并为select标签生成正确的选项？

Answer 1

通常，执行此操作的方法是使用最新版本的Struts2附带的Struts2 JSON plugin。要在JSP中与jQuery交互，您需要使用s：url为JSON操作创建URL，然后您可以使用jQuery的.getJSON()或.load（）来调用它。

但是，如果您的下拉选择确实不那么复杂，请不要过度设计。在初始页面加载时使用s：iterator可以更容易地渲染它们，并在下拉框中使用.change()来在选择组件之间移动数据，或者在其中一个选择框上扩充name属性表格提交。

Answer 2

<select id="stateSelect"  name="selectedState" onchange="loadCities(this.value)">
<s:iterator value="#session['myModel'].states" status="itr">
     <option value="<s:property value="code"/>">
      <s:property value="label"/>
</option>
</s:iterator>
</select>

<select id="citySelect"  name="selectedCity" >
</select>

<强> JQuery的

function loadCities(value){

        $("#citySelect").get(0).options.length = 0;
        $("#citySelect").get(0).options[0] = new Option("Loading cities", "-1"); 

        $.ajax({
            type: "POST",
            url: "MyStrutsActionToGetCities",
            data: "{stateID:" + value+ "}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(msg) {
                $("#citySelect").get(0).options.length = 0;
                $("#citySelect").get(0).options[0] = new Option("Select city", "-1"); 

                $.each(msg.d, function(index, item) {
                    $("#citySelect").get(0).options[$("#citySelect").get(0).options.length] = new Option(item.Display, item.Value);
                });
            },
            error: function() {
                $("#citySelect").get(0).options.length = 0;
                alert("Failed to load cities");
            }
        });
}

取自this tutorial

更新：此示例用于根据所选状态加载城市列表。你可以做类似的事情来加载国家选择的州名单。另外here is a link描述struts的ajax请求/响应而不使用任何插件

struts2：使用javascript和jquery根据第一个选择值更新第二个选择

2 个答案: