StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Well anyway, as i said, i finally managed to do it by myself, so here's my answer... </p> <p>I receive the map from my controller like this (I'm using Spring, don't know how this works with other frameworks):</p> <pre><code><c:set var="manufacturersAndModels" scope="page" value="${MANUFACTURERS_AND_MODELS_MAP}"/> </code></pre> <p>These are my combos:</p> <pre><code><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> </code></pre> <p><br/></p> <pre><code>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> </code></pre> <p>I imported the following classes (some names have, of course, been changed):</p> <pre><code><%@ page import="org.mycompany.Car,java.util.Map,java.util.TreeMap,java.util.List,java.util.ArrayList,java.util.Set,java.util.Iterator;" %> </code></pre> <p>And here's the code that does all the hard work:</p> <pre><code><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]); } } </code></pre> <p></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload