How to populate struts 2 ui select tag by json returned list using jquery?

Question

//struts.xml
    <package name="ajax" namespace="/" extends="struts-default,json-default">
        <action name="CheckUserAction" class="com.controller.ajax.AjaxAction">
            <result type="json">
            <param name="root">jsonData</param>
            </result>
        </action>
    </package>



    //Action Class
public class AjaxAction extends ActionSupport {
private String capacity;
private String greeting;
private List<String> countryList;
private Map<String, Object> jsonData;
public String execute() throws Exception {
    jsonData = new LinkedHashMap<String, Object>();
    greeting = "HI " + "AMIT";
    countryList = new ArrayList<String>();
    countryList.add("US");
    countryList.add("UK");
    countryList.add("Russia");
    jsonData.put("capacity", this.getCapacity());
    jsonData.put("countryList", countryList);
    jsonData.put("countryMap", countryMap);
    jsonData.put("greeting", greeting);
    return SUCCESS;
}
//Getter and setters

}

//Script
$(document).ready(function() {
        $("#capacity").change(function() {
            var capacity = $("#capacity").val();
            $.getJSON('CheckUserAction.action', {
                capacity : capacity
            }, function(data) {
                $('#abc').append('<br>' + data.capacity);
                $('#abc').append('<br>' + data.countryList);
                $('#xyz').attr('value', data.greeting);
                $('#pqr').attr('list', data.countryList);
            });
            return false;
        });
    });





//JSP code
<table border="0">

        <tr>
            <td><s:label for="capacity" value="Capacity" /></td>
            <td><s:textfield name="capacity" placeholder="100" id="capacity"
                    value="abc"></s:textfield></td>
        </tr>
        <tr>
            <td><s:label for="dynamic" value="Ajax" /></td>
            <td><s:textfield name="dynamic" value="learning" id="xyz"></s:textfield></td>
        </tr>
        <tr>
            <td><s:label for="flightId" value="Flights" /></td>
            <td><s:select list="#{'1':'1' }" name="fightId" id="pqr"></s:select></td>
    </tr>
</table>
<div id="abc">Initial</div>

I want to populate list(id:pqr) with json returned list countryList, i am able to change attribute value of textfield(id:xyz),i also appended it to div(id:abc) but i am not able to change attribute list of struts select tag. Is it has something to do with how struts tag are populated in HTML.

Also i am not using struts-jquery plugin nor dojo plugin. Thanks

Answer 1

What kind of data you are receiving in data.countryList? Can u post that data? I hope there is no attr property named list for dropdown. List property provided by Struts. You can compose the data for dropdown like

<option value="1">India</option>
<option value="2">United States</option>
<option value="3">United Kingdom</option>

and if you are sending new list you can do fill the countryList like,

$('#pqr').html(composed_country_list);

Else you are updating counrty means you can append the data to dropdown like,

$('#pqr').append(composed_country_list);

Let me know if this helps..