我正在开发一个 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?只是 Action 名称?
3.如何解析返回结果?我可以从 Java 代码返回具有“代码”和“标签”以及其他属性的“状态”对象列表。我如何在 javascript 中解析此列表并为选择标记生成正确的选项?
请您参考如下方法:
<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");
}
});
}
更新:此示例用于根据所选状态加载城市列表。您可以做类似的事情来加载国家选择的州列表。还有 here is a link在不使用任何插件的情况下描述 struts 的 ajax 请求/响应