Question

180

struts2: update second select based on first select value using javascript and jquery

rated 0 times [ 181] [ 1] / answers: 1 / hits: 17829 / 13 Years ago, wed, august 10, 2011, 12:00:00

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>

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

janettejordynm

Add To Favorites

Follow

Total Points: 550

Total Questions: 94

Total Answers: 98

Location: Senegal

Member since Fri, Aug 21, 2020

4 Years ago

janettejordynm questions

1 Chunk file upload with axios

Tue, Nov 24, 20, 00:00, 4 Years ago

1 Node unable to find module alias defined in tsconfig and package.json

Thu, Jun 18, 20, 00:00, 4 Years ago

1 How to check if an entered answer is correct with HTML code?

Sat, May 23, 20, 00:00, 4 Years ago

1 Can someone explain this piece of Javascript code?

Mon, Apr 6, 20, 00:00, 4 Years ago

1 AES Encryption/Decryption in Node JS similar to Java

Tue, Feb 18, 20, 00:00, 4 Years ago

View All

answered 13 Years ago ashelye · Accepted Answer

<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

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