Dynamic Drop-Down Box (Part 3)

Part 3 of 3

This part of the tutorial will show how to build dynamic dropdown (select) boxes from the server. We'll use the Java language for this exercise. The main thing to undestand is the interaction between server side and client side. Once you understand that, you can develop similar code in any programming language.

To use an example from previous parts of the tutorial, we assume we have a table containing country and city names. The table will contain 2 columns: countries and cities. This is a simplified example. In the real world, you would probably use two tables with foreign key/primary key relationships.

We are going to query the database and store the the list of countries/cities as an ArrayList. The benefit of using an ArrayList is that you don't need to know the number of elements it will hold at the time you create it.

Each element of the ArrayList will contain a 2-element String array. The first array element will contain a country name, and the second will contain a city name.

Query the Database

Let's create an ArrayList to hold the result of our query.

ArrayList arList = new ArrayList();

Let's say we obtained a connection to the database and stored in a variable con.

First, we create a statement:

Statement st = con.createStatement();

Obtain a reference to the ResultSet:

String sql = "Select countries, cities from myTable";
ResultSet theResult=st.executeQuery(sql);

Now, we loop through the ResultSet and add a 2-element String array as an element of the ArrayList.

while(theResult.next()){
 String[] cols= new String[2];
 cols[0] =theResult.getString(1);
 cols[1] =theResult.getString(2);
 arList. add(cols);
 }

Do some clean-up:

 theResult.close();
 st.close();
 con.close();

Now the ArrayList contains a list of 2-element String arrays representing countries and cities.

Unique List

The next step is to create a unique list of countries from this ArrayList. We going to use another ArrayList for this purpose:

ArrayList unique = new ArrayList ();
Iterator it = arList.iterator();

while(it.hasNext()){
  String[] str = (String[])it.next();
  if(!unique.contains(str[0]))
    unique.add(str[0]);
}

The unique ArrayList now contain a non-duplicate list of countries.

Build Client Side JavaScript

This step is probably the most complex. The purpose of this step is to create client-side JavaScript arrays that should be familiar to you from part II of this tutorial. An example:

var arr1 = new Array('Canada', 'Toronto', 'Montreal', 'Vancouver');
var arr2 = new Array( 'USA', 'Boston', 'New York', 'Washington', 'Houston');

The first element of each array will represent the country, and the subsequent elements will represent cities belonging to that country.

Create an iterator for the unique ArrayList:

Iterator iter = unique.iterator();

Start writing to the client:

out.println ("<script>");

Create a counter for client-side arrays:

int y = 1;

while(iter.hasNext()){
 String ctry = (String) iter.next();

for each unique country, create a JavaScript array where the country name is the first element:

out.println("\nvar arr" + y+"= new Array('" + ctry +"');");
Iterator it = arList.iterator();

Iterate through each element of arList ArrayList. If the country name is the same, add elements to the client-side JavaScript array corresponding to city names:

while(it.hasNext()){
  String[] cols = (String[])it.next();
  if(cols[0].equals(ctry))
 out.println ("arr"+ y +".push('" + cols[1] +"');");
 }
  y++;
}

Create a variable referring to the number of JavaScript arrays:

out.println ("var num = " + --y +";");
out.println ("</script>");

That is all that is required on the server side.

Create JavaScript Object

The last step involves some changes on the client side. We are going to use the same JavaScript functions as in the previous part of the tutorial except for the construction of a JavaScript object.

Create an object:

var obj = new Object();

Each array of country/cities will become a property of the object:

for(var i=1; i<= num; i++){
  obj[i] = eval('arr'+i);
}

That's it.