Struts2: updating second select based on first select value using javascript and jquery

Question

I am working on a struts2 project where I have 3 html controls, each of which depends on the previous choice. Let's say the first choice for the country, the second for the state, the third for the city. The list of parameters in the choice of state will be filtered out only to display the states in this country and so on. Due to some other limitations, I use the main html control instead of struts2. Here is an example of how I am filling select now:

<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> 

I think I need to make an onchange event, make an ajax call to get a list of "states" based on the selected "country". Questions:
1. How can I make this ajax call using jquery?
2. What do I need to pass as a url to call ajax? just the name of the action?
3. How can I analyze the results? 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 create the correct parameters for the select tag?

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

Taken from this tutorial

Refresh . This example is used to load a list of cities based on the selected state. You can do this to download a list of states of your choice of country. Also here is a link describing ajax request / response for struts without using any plugin

Answer 2

Typically, the way to do this is to use the Struts2 JSON plugin , which comes with the latest versions of Struts2. To interact with jQuery in your JSP, you will want to use s: url to create the URL of your JSON action, and then you can invoke it using jQuery . GetJSON () or .load ().

However, if your options for the dropdown menu are really not that complicated, don't rebuild them. They can be simplified by using s: iterator when loading the start page and . Change () in the drop-down lists to either move data between the selection components or increase the name attribute in one of the selection fields to submit the form.