Question

Edit Is there any other way I can fill the 2nd drop down as per 1st drop down selection jquery ajax. Please post any link if anyone has one.

---

I have update the second dropdown based on the first dropdown selection. I am using jQuery and Struts2. I want to update the second dropdown using jQuery ajax. Can someone please help me the code. I tried with the below method but somehow I was unable to pass the parameters to Action class. Thank you in advance.

http://www.joe-stevens.com/2010/02/23/populate-a-select-dropdown-list-using-jquery-and-ajax/

Edit:
As per Climbage said I am updating with code whatever I have.

caseSelect is first Dropdown, termSelect is second, casetermcodes is action. selCaseDropDown is hidden variable I want fetch the selected value of first dropdown in Action class where I have getter and setter methods for this variable. I first stuck at sending the selected value to action class. I have not did anything further this point.

    $("#caseSelect").change(
        function(){
        $("#result").html('Retrieving ...');
        var selCase = $("#caseSelect").val();
        $.ajax({
            type: "POST",
            url: "/dwdst/casetermcodes",
            data: {selCaseDropDown: selCase},
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(msg) {
                $("#termSelect").get(0).options.length = 0;
                $("#termSelect").get(0).options[0] = new Option("Term Codes", "-1");   

                $.each(msg.d, function(index, item) {
                    $("#termSelect").get(0).options[$("#termSelect").get(0).options.length] = new Option(item.value, item.key);
                });
            },
            error: function() {
                alert("Failed to load Term Codes");
                $("#result").hide();
            }
        });
    });

Action class :

public String execute(){
    logger.info("selected value >>"+selCaseDropDown);
    return SUCCESS;
}

public String getSelCaseDropDown(){
    return selCaseDropDown;
}

public void setSelCaseDropDown(String selCaseDropDown){
    this.selCaseDropDown = selCaseDropDown;
}

Answer 1

I have solved this by creating another short JSP which has only drop down (second drop down) as html code and in my action result would be this short page.

When the first page is select call action using below code and overriding the drop down already shown in jsp with this second short drop down only jsp.

getSecondSelect is action I am calling which has result as that short jsp.

tercodeResult is the div tag which is replaced with new drop down.

selId is the selected value from first drop down.

        $.ajax({
            type: "GET",
            url: "getSecondSelect",
            data:"selId=" + selCase,
            dataType: "text/html;charset=utf-8",
            success: function(msg) {
                $("#tercodeResult").html(msg);
            }
        });