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

【问题标题】：struts2: update second select based on first select value using javascript and jquerystruts2：使用javascript和jquery根据第一个选择值更新第二个选择
【发布时间】：2011-10-23 17:16:33
【问题描述】：

我正在处理一个 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 标签生成正确的选项？

【问题讨论】：

我以前做过。我会做 jonathan 推荐的使用 struts2-json-plugin （它很容易使用），使用它的操作返回一个 json 字符串。如果您使用 chrome，您会在屏幕上看到它，而使用 firefox，您将使用 firebug 看到它。手头有 json 你可能会使用 jQuery 的 $.getJSON() 这个页面上的 cat 示例在开始时帮助了我很多：api.jquery.com/jQuery.getJSON 你可以将它复制到你自己的页面中，它会使用 json，并且 cat 图像不闪烁网站，让您无需服务器即可使用 json。

标签： javascript jquery select struts2

【解决方案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");
            }
        });
}

取自this tutorial

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

【讨论】：

【解决方案2】：

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

但是，如果您的下拉选项确实没有那么复杂，请不要过度设计。在初始页面加载时使用 s:iterator 将它们全部呈现并在下拉框中使用 .change() 在选择组件之间移动数据或增加表单提交的选择框之一上的名称属性会更容易.

【讨论】：