struts2：使用javascript和jquery根据第一个选择值更新第二个选择 [英] struts2: update second select based on first select value using javascript and jquery

问题描述

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

I am working on a struts2 project where I have 3 html select controls each one being dependent on the previous selection. Say the first select is for country, second for state, third for city. The list of options in the state select would be filtered to only display the states in that country and so on. Due to some other limitations I am using the basic html select control instead of struts2's. Here is a sample of how I am currently populating the select:

<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标签生成正确的选项？

I think that what I need to do is onchange event do an ajax call to retrieve the list of "states" based on the selected "country". The questions are:
1. how can I do this ajax call using jquery?
2. what do I need to pass as the url for the ajax call? just the action name?
3. how can I parse the results back? From java code I can return a list of "State" objects that have "code" and "label" and other properties. How can I parse this list in javascript and generate the proper options for the select tag?

推荐答案

<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请求/响应，而不使用任何插件

Update:This example is used to load city list based on the state selected. You can do similar thing to load state list on country selection. Also here is a link describing ajax request/response for struts without using any plugin

这篇关于struts2：使用javascript和jquery根据第一个选择值更新第二个选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！