Working of ComboBox in JSP

Question

I am new to jsp programming. I have no idea how to navigate if there is two dropdownlist. Here second one depends on the first one then should i have to design two pages with sam dessign?
I have checked the url
http://forum.java.sun.com/editwatches!default.jspa
thsi page contains two comboboxes. I have selected java essentials from first combo. Then it got redirected to another page.
with the url
http://forum.java.sun.com/editwatches!default.jspa?filterCat=5
When I checked the view source of http://forum.java.sun.com/editwatches!default.jspa
I have seen something like this...
<select name="filterForum"
onchange="location.href='editwatches!default.jspa?filterForum='+this.options[this.selectedIndex].value+'&filterCat='+this.form.filterCat.options[this.form.filterCat.selectedIndex].value;">
In the above code what do they mean by location?
Please reply me
Thanks in advance

Answer 1

Hi,
Well if you are looking for Dependent Dropdown problem...
There are many solutions in order acheive this...
checkout some of those...
1).Save the present of the Form in a Bean with the scope of session and onChange of the first Combo box redirect it to a Controller(Servlet) Query the Database and save the results in the FormBean which we saved in the scope session and then redirect the formBean to the same JSP again...and now repopulate the second combo with new obtained results from the database and repopulate the rest of the form according to present FormBean state from the session.
Here is a Typical example for you
Assuming that a Servlet had already preloaded the first drop-down values from the database in a FormBean
FormBean.java
=============
public class FormBean{
private String firstDDValue = new String("");
private ArrayList firstDDOptions = new ArrayList();
private String secondDDValue = new String();
private ArrayList secondDDOptions = new ArrayList();
// Setters & getters for all the bean properties.
}Form.jsp:
=========
<jsp:useBean id="formBean" class="com.formbeans.FormBean" scope="session"/>
<%
  ArrayList fristDD = formBean.getFirstDDOptions();
  ArrayList secondDD = formBean.getSecondDDOptions();
  String firstDDValue = formBean.getFirstDDValue();
  String secondDDValue = formBean.getSecondDDValue();
  int FDSIZE = fristDD.size();
  int SDSIZE = secondDD.size();
%>
<form name="formBean">
First DropDown:
<select name="firstDropDown" onChange="if(this.value != '-1')window.location.href='ControlerServlet?firstDropDown='+escape(this.value);" >
<option value="-1">Pick One</option>
<%for(int i = 0;i < FDSIZE ; i++){
    String value = ((String[])firstDDOptions.get(i))[0];
    String text = ((String[])firstDDOptions.get(i))[1];
%>
  <%if(value.equals(firstDDValue){)%>
   <option value="<%=value%>" selected="selected"><%=text%></option>
  <%}else{%>
   <option value="<%=value%>"><%=text%></option>
  <%}%>
<%}%>
</select>
<BR/>
<BR/>
Second DropDown:
<select name="secondDropDown">
<option value="-1">Pick One</option>
<%for(int i = 0;i < FDSIZE ; i++){
    String value = ((String[])secondDDOptions.get(i))[0];
    String text = ((String[])secondDDOptions.get(i))[1];
%>
  <%if(value.equals(secondDDValue){)%>
   <option value="<%=value%>" selected="selected"><%=text%></option>
  <%}else{%>
   <option value="<%=value%>"><%=text%></option>
  <%}%>
<%}%>
</select>
<BR/>
<BR/>
</form> NOTE: It would be a better practise if you can make use of JSTL tags to render the page in to make your View Page look more cleaner
ControlerServlet.java
=====================
public doGet(request,response){
String firstDropDown = request.getParameter("firstDropDown");
HttpSession session = request.getSession();
FormBean fb = (FormBean) session.getAttribute("formBean");
fb.setFirstDDValue(firstDropDown); 
fb.setSecondDDOptions(DAODelegate.getSecondDropDownData(firstDropDown));
session.setAttribute(""formBean",fb);
response.sendRedirect("/Form.jsp");
}2).Make use of a Hidden IFrame by using which you reload the page and then Reload a Page after getting values from the database update the parent frame combo accordingly.
3).Take help of AJAX call a Controller get the Response in XML/JSON and parse it and then update the second combo by the XML/JSON response.
checkout an example by you can achieve this.
index.jsp:
=======
<%@page language="java" %>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Automatic Dependent Drop-Down Updation</title>
     <script language="javascript">
      // Global Variable for XmlHttp Request Object  
      var xmlhttp
      // Timer Variables
      var c = 0
      var t
       /* A function which calls a servlet  named AjaxServlet to get XmlData using XmlHttpObject */    
        function refreshCombo(txt){
            xmlhttp = null
            // code for initializing XmlHttpRequest Object On Browsers like  Mozilla, etc.
            if (window.XMLHttpRequest){
                 xmlhttp = new XMLHttpRequest()
            // code for initializing XmlHttpRequest Object On Browsers like IE
           else if (window.ActiveXObject) {
               xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
           if (xmlhttp != null){
              // Setting the Servlet url to get XmlData
               url = "AjaxServlet?req="+txt;
               // Course of Action That Should be Made if their is a change in XmlHttpRequest Object ReadyState NOTE : it is 4 when it has got request from CGI
               xmlhttp.onreadystatechange = getResponseAction;
               // Open the Request by passing Type of Request & CGI URL
               xmlhttp.open("GET",url,true);
               // Sending URL Encoded Data
               xmlhttp.send(null);
           else{
             // Only Broswers like IE 5.0,Mozilla & all other browser which support XML data Supports AJAX Technology
             // In the Below case it looks as if the browser is not compatiable
              alert("Your browser does not support XMLHTTP.")
      /* Used for verifing right ReadyState & Status of XmlHttpRequest Object returns true if it is verified */
      function verifyReadyState(obj){
         // As Said above if XmlHttp.ReadyState == 4 then the Page Has got Response from WebServer
          if(obj.readyState == 4){
           // Similarly if XmlHttp.status == 200 it means that we have got a Valid response from the WebServer
            if(obj.status == 200){               
                return true
             else{
                alert("Problem retrieving XML data")
      /* Action that has to take place after getting reponse */
      function getResponseAction(){
          // Verifying State & Status
          if(verifyReadyState(xmlhttp) == true){
              // Building a DOM parser from Response Object
              var response = xmlhttp.responseXML.documentElement
              // Deleting all the Present Elements in the Drop-Down Box
              drRemove()      
              // Checking for the Root Node Tag
              var x = response.getElementsByTagName("option")
              var val
              var tex
              var optn
              for(var i = 0;i < x.length; i++){
                 optn = document.createElement("OPTION")
                 var er
                 // Checking for the tag which holds the value of the Drop-Down combo element
                 val = x.getElementsByTagName("val")
try{
// Assigning the value to a Drop-Down Set Element
optn.value = val[0].firstChild.data
} catch(er){
// Checking for the tag which holds the Text of the Drop-Down combo element
tex = x[i].getElementsByTagName("text")
try{
// Assigning the Text to a Drop-Down Set Element
optn.text = tex[0].firstChild.data
} catch(er){
// Adding the Set Element to the Drop-Down
document.SampleForm.state.options.add(optn)
/* Function removes all the elements in the Drop-Down */
function drRemove(){
document.SampleForm.state.options.length = 0;
</script>
</head>
<body>
<pre> <h1>Refresh Drop-Down <div id='txt'> </div> </h1></pre>
<form name="SampleForm">
<table align="center">
<tr>
<td>Country:</td>
<td>
<select name="country" onchange="refreshCombo(this.value)">
<option value="india">INDIA</option>
<option value="US">United States</option>
<option value="UK">United Kingdom</option>
<option value="Saudi">Saudi</option>
</select>
</td>
</tr>
<tr>
<td>State:</td>
<td>
<select name="state">
<option value="-1">Pick One</option>
</select>
</td>
</tr>
</form>
</body>
</html>
AjaxServlet.java:
=============
* AjaxServlet.java
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
* @author RaHuL
* @version
public class AjaxServlet extends HttpServlet {
    /** Processes requests for both HTTP <code>GET</code> and <code>POST</code> methods.
     * @param request servlet request
     * @param response servlet response
    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        // Sets the content type made to xml specific
        response.setContentType("text/xml");
        response.setHeader("pragma","no-cache");
        response.setHeader("Cache-Control","no-cache");
        response.setHeader("Cache-Control","no-store");
       //Initializing PrintWriter
        PrintWriter out = response.getWriter();
        String req = request.getParameter("req");
        // Creating an instance of XmlBean Which generates XmlData From Business Logic specified
        XmlBean xml = new XmlBean(req);
        // Method to Generate XMLDATA
        String buffer = xml.getXmlData();
        // If Close of DB connections are succefull then write the content to the printstream
        if(xml.close() == true)
            out.write(buffer);   
        out.flush();                 
        out.close();
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        // Calls a Method called processRequest Which Processes the request which was made by the Browser Page
        processRequest(request, response);
}XmlBean.java:
===========
* XmlBean.java
import java.sql.*;
import java.util.*;
import java.io.*;
* @author RaHuL
public class XmlBean {
    private Connection con = null;
    private PreparedStatement pstmt = null;
    private ResultSet rs = null;
    private String req;
    // Setting CLASSURL path to TYPE I Driver
    private String CLASSURL = "sun.jdbc.odbc.JdbcOdbcDriver";
    /* Specifing CONNECTION PATH to a DSN named TestDsn
     * Please Make Sure you create a DSN Named TestDsn to your database which holds EMP table
    private String CONNECTIONURL = "jdbc:odbc:TestDsn";
    boolean IS_ESTABLISHED = false;
    /** Creates a new instance of XmlBean and also establishes DB Connections */
    public XmlBean(String req) {
        try{
            this.req = req;
            Class.forName(CLASSURL);
            con = DriverManager.getConnection(CONNECTIONURL,"admin","");
            IS_ESTABLISHED = true;
        } catch(SQLException sqe){
            sqe.printStackTrace();
        } catch(Exception exp){
            exp.printStackTrace();
    /* Generates XmlData For the Business Logic Specified */
    public String getXmlData(){
        String XmlBuffer = "";
        if(IS_ESTABLISHED == true){
            try{
                pstmt = con.prepareStatement("SELECT stateid,statename FROM EMP where countryid=' "+req+" ' " );
                rs = pstmt.executeQuery();
                if(rs != null){
                    XmlBuffer = XmlBuffer + "<?xml version=\"1.0\" encoding=\"ISO-8859-1\" ?>";
                    XmlBuffer = XmlBuffer + "<!--  Edited by Rahul Sharma -->";
                    // Root Node
                    XmlBuffer = XmlBuffer + "<dropdown>";
                    while(rs.next()){
                        String value = rs.getString(1);
                        String text = rs.getString(2);
                        // Sub-root Node
                        XmlBuffer = XmlBuffer + "<option>";
                        // node which holds value of drop-down combo
                        XmlBuffer = XmlBuffer + "<val>"+value+"</val>";
                        // node which holds text for drop-down combo
                        XmlBuffer = XmlBuffer + "<text>"+text+"</text>";
                        XmlBuffer = XmlBuffer + "</option>";
                    XmlBuffer = XmlBuffer + "</dropdown>";
            }catch(SQLException sqe){
                sqe.printStackTrace();
            } catch(Exception exp){
                exp.printStackTrace();
        return(XmlBuffer);
    /* Closes the DB Connection Conmpletely */
    public  boolean close(){
        if(IS_ESTABLISHED == true){
            try{
                pstmt.close();
                con.close();
                return(true);
            } catch(SQLException sqe){
                sqe.printStackTrace();
            } catch(Exception exp){
                exp.printStackTrace();
        return(false);
}Sample XML Reponse generated:
<?xml version=\"1.0\" encoding=\"ISO-8859-1\" ?>
<!--  Edited by Rahul Sharma -->
<dropdown>
<option>
<val>DEL</val>
<val>New Delhi</val>
</option>
<option>
<val>HAR</val>
<val>HARYANA</val>
</option>
</dropdown>for further reference you may use the below articles
http://www.it-eye.nl/weblog/2005/12/13/ajax-in-struts-implementing-dependend-select-boxes/
http://www.it-eye.nl/weblog/2006/04/04/implementing-dependent-select-boxes-in-jsf/
Hope this might help,if that does do not forget to assign/distribute Duke Stars which you have promised :)
REGARDS,
RaHuL