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

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

<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");
            }
        });
}

摘自本教程

更新：此示例用于根据所选的州加载城市列表。您可以执行类似的操作来加载国家/地区选择中的州列表。另外，这里还有一个描述 struts 的 ajax 请求/响应的链接，无需使用任何插件