Ajax for State and country combo box

Question

Core Ajax for State and country combo box to be used in JSP.

Related: http://stackoverflow.com/questions/2263996/populating-child-dropdownlists-in-jsp-servlet By the way, a combo box is **not** the same as a dropdown! A combo box is an *editable* dropdown. You don't want to have a combo box here. — BalusC, Sep 15 '10 at 12:07

score 0 · Answer 1 · answered Sep 15 '10 at 06:53

ajaxTest.jsp

<%@page contentType="text/html" pageEncoding="UTF-8" import="com.test.AjaxClass.*"%>

AJAX Page

        var XmlHttp=false;

        function CreateXmlHttp()
        {
            try
            {
                XmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //for IE6
            }
            catch(e)
            {
                try
                {
                    XmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch(oc)
                {
                    XmlHttp = new XMLHttpRequest();//for browser mozila, opera, firefox.
                }
            }
        }

        function cState(){
            var countid = document.getElementById('country').value;                
            CreateXmlHttp();
            XmlHttp.onreadystatechange=HandleResponse;
            XmlHttp.open("GET", "any.jsp?r=Math.random()&countid="+countid, true);
            XmlHttp.send(null);
        }
        function HandleResponse(){
            var stateobj = document.getElementById("state");
            stateobj.options.length = 0;
            if(XmlHttp.readyState==4 || XmlHttp.readyState=="complete"){
                var XmlRoot = XmlHttp.responseXML.documentElement;
                var xRows = XmlRoot.getElementsByTagName("check");
                for(var i=0; i<xRows.length; i++){
                    var stateid = xRows[i].childNodes[0].firstChild.nodeValue;
                    var statename = xRows[i].childNodes[1].firstChild.nodeValue;
                    stateobj.options[i] = new Option(statename,stateid);
                }
            }
        }

    </script>
</head>
<body>
    <select onchange="cState();" name="country" id="country">
        <option value="0">Select Country</option>
        <%
                    for (CountryClass cc : ajax.getCoutryList()) {
        %>
        <option value="<%=cc.getCountryid()%>"><%=cc.getCountryName()%></option>
        <%                            }
        %>
    </select>
    <select name="state" id="state">

    </select>          
</body>

any.jsp

<?xml version="1.0"?>

<%@page contentType="text/xml" pageEncoding="UTF-8" import="com.test.AjaxClass.*"%> <% int countid = Integer.parseInt(request.getParameter("countid")); //System.out.println("tt :: " + countid); java.util.List statelist = call.changeState(countid); //System.out.println("length ::" + statelist.size()); for (StateClass sc : statelist) { %> <%=sc.getStateid()%> <%=sc.getStateName()%> <% } %>

AjaxClass.java

package com.test;

import java.util.ArrayList; import java.util.List;

public class AjaxClass {

private List<CountryClass> coutryList = new ArrayList<CountryClass>();

public List<CountryClass> getCoutryList() {
    coutryList.add(new CountryClass(1, "India"));
    coutryList.add(new CountryClass(2, "Pakistan"));
    coutryList.add(new CountryClass(3, "Bangladesh"));
    coutryList.add(new CountryClass(4, "U.A.E."));
    return coutryList;
}

public void setCoutryList(List<CountryClass> coutryList) {
    this.coutryList = coutryList;
}

public class CountryClass {

    public Integer countryid;
    public String countryName;

    public String getCountryName() {
        return countryName;
    }

    public void setCountryName(String countryName) {
        this.countryName = countryName;
    }

    public Integer getCountryid() {
        return countryid;
    }

    public void setCountryid(Integer countryid) {
        this.countryid = countryid;
    }

    public CountryClass(Integer countryid, String countryName) {
        this.countryid = countryid;
        this.countryName = countryName;
    }
}
private List<StateClass> stateList = new ArrayList<StateClass>();

public List<StateClass> getStateList() {
    stateList.add(new StateClass(1, 1, "Gujarat"));
    stateList.add(new StateClass(2, 1, "Maharashtra"));
    stateList.add(new StateClass(3, 2, "Karachi"));
    stateList.add(new StateClass(4, 2, "Lahore"));
    stateList.add(new StateClass(5, 3, "Dhaka"));
    stateList.add(new StateClass(6, 3, "Chittagong"));
    stateList.add(new StateClass(7, 4, "Dubai"));
    stateList.add(new StateClass(8, 4, "Behrin"));
    stateList.add(new StateClass(9, 4, "Sarjah"));
    return stateList;
}

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

public class StateClass {

    Integer stateid;
    Integer countryref;
    String stateName;

    public Integer getCountryref() {
        return countryref;
    }

    public void setCountryref(Integer countryref) {
        this.countryref = countryref;
    }

    public String getStateName() {
        return stateName;
    }

    public void setStateName(String stateName) {
        this.stateName = stateName;
    }

    public Integer getStateid() {
        return stateid;
    }

    public void setStateid(Integer stateid) {
        this.stateid = stateid;
    }

    public StateClass(Integer stateid, Integer countryref, String stateName) {
        this.stateid = stateid;
        this.countryref = countryref;
        this.stateName = stateName;
    }
}

public List<StateClass> changeState(Integer countryref) {
    List<StateClass> newList = new ArrayList<AjaxClass.StateClass>();
    for (StateClass stateClass : getStateList()) {
        if (stateClass.countryref == countryref) {
            newList.add(stateClass);
        }
    }
    return  newList;
}

}

Ajax for State and country combo box

1 Answers1