Question

Ok, here’s one for the JavaScript gurus:

In my app, one of the controllers passes a TreeMap to it’s JSP. This map has car manufacturer’s names as keys and Lists of Car objects as values. These Car objects are simple beans containing the car’s name, id, year of production etc. So, the map looks something like this (this is just an example, to clarify things a bit):

Key: Porsche
Value: List containing three Car objects(for example 911,Carrera,Boxter with their respectable years of production and ids)
Key: Fiat
Value: List containing two Car objects(for example, Punto and Uno)
etc…

Now, in my JSP i have two comboboxes. One should receive a list of car manufacturers(keys from the map – this part I know how to do), and the other one should dynamicaly change to display the names of the cars when the user selects a certain manufacturer from the first combobox. So, for example, user selects a "Porsche" in the first combobox, and the second immediately displays "911, Carrera, Boxter"…

After spending a couple of days trying to find out how to do this, I’m ready to admit defeat. I tried out a lot of different things but every time I hit a wall somewehere along the way. Can anybody suggest how I should approach this one? Yes, I’m a JavaScript newbie, if anybody was wondering…

EDIT: I’ve retagged this as a code-challenge. Kudos to anybody who solves this one without using any JavaScript framework (like JQuery).

Answer 1

Well anyway, as i said, i finally managed to do it by myself, so here’s my answer…

I receive the map from my controller like this (I’m using Spring, don’t know how this works with other frameworks):

<c:set var='manufacturersAndModels' scope='page' value='${MANUFACTURERS_AND_MODELS_MAP}'/> 

These are my combos:

<select id='manufacturersList' name='manufacturersList' onchange='populateModelsCombo(this.options[this.selectedIndex].index);' >                   <c:forEach var='manufacturersItem' items='<%= manufacturers%>'>                     <option value='<c:out value='${manufacturersItem}' />'><c:out value='${manufacturersItem}' /></option>                   </c:forEach>                 </select> 

select id='modelsList' name='modelsList'                   <c:forEach var='model' items='<%= models %>' >                     <option value='<c:out value='${model}' />'><c:out value='${model}' /></option>                   </c:forEach>                 </select> 

I imported the following classes (some names have, of course, been changed):

<%@ page import='org.mycompany.Car,java.util.Map,java.util.TreeMap,java.util.List,java.util.ArrayList,java.util.Set,java.util.Iterator;' %> 

And here’s the code that does all the hard work:

<script type='text/javascript'> <%        Map mansAndModels = new TreeMap();      mansAndModels = (TreeMap) pageContext.getAttribute('manufacturersAndModels');      Set manufacturers = mansAndModels.keySet(); //We'll use this one to populate the first combo      Object[] manufacturersArray = manufacturers.toArray();       List cars;      List models = new ArrayList(); //We'll populate the second combo the first time the page is displayed with this list    //initial second combo population      cars = (List) mansAndModels.get(manufacturersArray[0]);       for(Iterator iter = cars.iterator(); iter.hasNext();) {         Car car = (Car) iter.next();        models.add(car.getModel());      } %>   function populateModelsCombo(key) {   var modelsArray = new Array();    //Here goes the tricky part, we populate a two-dimensional javascript array with values from the map <%                                for(int i = 0; i < manufacturersArray.length; i++) {         cars = (List) mansAndModels.get(manufacturersArray[i]);        Iterator carsIterator = cars.iterator();            %>     singleManufacturerModelsArray = new Array(); <%     for(int j = 0; carsIterator.hasNext(); j++) {        Car car = (Car) carsIterator.next();   %>              singleManufacturerModelsArray[<%= j%>] = '<%= car.getModel()%>';  <%        }  %>   modelsArray[<%= i%>] = singleManufacturerModelsArray;  <%      }           %>       var modelsList = document.getElementById('modelsList');    //Empty the second combo   while(modelsList.hasChildNodes()) {     modelsList.removeChild(modelsList.childNodes[0]);   }   //Populate the second combo with new values   for (i = 0; i < modelsArray[key].length; i++) {      modelsList.options[i] = new Option(modelsArray[key][i], modelsArray[key][i]);   }       }