我正在开发一个 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"); 
            } 
        }); 
} 

取自this tutorial

更新:此示例用于根据所选状态加载城市列表。您可以做类似的事情来加载国家选择的州列表。还有 here is a link在不使用任何插件的情况下描述 struts 的 ajax 请求/响应


评论关闭
IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!