Populate 2nd dropdown based on 1st dropdown selection using jQuery, ajax, struts2

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

Try this, will help you in Struts 2.0.14 with jsonplugin-0.32.jar.

struts.xml:

<struts>
     <package name="example" extends="json-default">
        <action name="HelloWorld" class="example.HelloWorld"  >
            <result type="json" />
        </action>
              <action name="HelloWorld1" class="example.HelloWorld"  >
            <result name="success" >example/HelloWorld.jsp</result>
        </action>
    </package>
</struts>

action class Helloworld.java:

package prabhakar;

import glb.DB;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;

/**
 * Prabhakar
 */
public class HelloWorld {

    private List<StateMaster> stateList = new ArrayList<StateMaster>();
    private List<RegnMaster> regnList = new ArrayList<StateMaster>();
    private Integer stateId;

    public Integer getStateId() {
        return this.stateId;
    }

    public void setStateId(Integer stateId) {
        this.stateId = stateId;
    }

    public List<StateMaster> getStateList() {
        return stateList;
    }

    public void setStateList(List<StateMaster> stateList) {
        this.stateList = stateList;
    }

    public void setRegnList(List<RegnMaster> regnList) {
        this.regnList = regnList;
    }

    public List<RegnMaster> getRegnList() {
        return regnList;
    }

    public String execute() throws Exception {

        stateList = DB.getStateData()//
            if (stateId != null) {
            regnList = DB.getRegnByStateId(stateId);
        }

        //setMessage(getText(MESSAGE));
        return "success";
    }
    /**
     * Provide default valuie for Message property.
     */
}

You can directly call HelloWorld.action to view the JSON data or else you can bind the JSON data to a form element below.

JSP page HelloWorld.jsp:

  /*
     Prabhakar
  */

<%@ page contentType="text/html; charset=UTF-8" %>    
<%@ taglib prefix="s" uri="/struts-tags" %>

<script>
    <%@include file="../js/jquery-1.7.1.min.js"%>
</script>

<html>

    <!-- JavaScript Plugins -->
    <script>
        function getLoad(){

            var stateId = $('#state').val();

            $.getJSON('HelloWorld.action', {'stateId': stateId},
            function(data) {

                var divisionList = (data.regnList);

                var options = $("#regn");
                options.find('option')
                .remove()
                .end();
                options.append($("<option />").val("-1").text("--Select--"));
                $.each(divisionList, function() {

                    options.append($("<option />").val(this.regnId).text(this.regnName));
                });
            }
        );}
    </script>

    <!-- jQuery-UI Dependent Scripts -->

    <body>
        State List <s:select name="stateId" list="stateList" id="state" listKey="stateId" onchange="getLoad()" listValue="stateName" headerKey="0" headerValue="--select--" />
    Regn List <s:select name="regnId"  list="regnList" listKey="regnId" id="regn" listValue="regnName" headerKey="0" headerValue="--select--" />
</body>
</html>

Answer 2

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