View Full Version : Dynamic multi column menu?

02-02-2005, 07:20 AM
I am having difficulty trying to build a menu with a set of 2 columns and another set of 3 columns.

The first set of 2 columns would be "car make" and "model" for example. The first column would be preloaded with various car makers (Ford, Honda, GM, etc). If the user were to select Honda in the first column all the various Honda models would appear in the next column.

Then on the same page the 2nd set of 3 columns would have "country", "province/state", "city". This would then behave in the same manner as the menu selection above. If "country" were to be selected, all the states of that country would then appear in the 2nd column. Then when clicking on a variable in the 2nd column the appropriate list of cities would appear in the final column.

In the end I would like to be able to pass on this data to a form submitted by the user to query/search a database. So each menu item would need a value that could be passed along.

Here are a few example pages of what I mean:
Example 1 (http://wdoe.riklund.org/root/javascript/visuals/selects/fill-list/index.html) (discussed here (http://www.sitepoint.com/forums/showthread.php?t=222093))
Example 2 (http://ati.com/support/driver.html)
Example 3 (http://nvidia.com/content/drivers/drivers.asp)

Any suggestions/help on the best way to implement this would be greatly appreciated thanks!

02-02-2005, 05:16 PM
This post (http://www.codingforums.com/showthread.php?t=48509) does something similar to what you want, but rather than changing the second and third drop menus, it just sorts them. However it'd be fairly simple to alter the script to switch between different arrays and displaying these in the appropriate drop menus.

If you need some more help, reply and we can see what we can do :thumbsup:

02-28-2005, 06:16 AM
Thanks for your reply Badman3k. Unfortunately, I'm not quite sure that the example provided will allow me to do as what I hope to do.

What I want is to have 2 groups of select boxes (2 in each group...before I had said 2 and 3 but I have since decided against that).

For example I would have as follows:



When a site visitor selects a particular value already present in the first select box "CarMake", the "CarModel" box would then dynamically list all the values associated with that particular CarMake.

The user could then move on to select a value preloaded in the "State/Province" select box and based upon the select value the appropriate cities would appear in the City box.

Then based on these values the user could execute a search that would query the MySql db and return the relevant results.

Thanks again for your help on this.

**Update: Just looked around the tutorials a bit more and I see the Double Combo box tutorial (http://javascriptkit.com/script/cut183.shtml).

This is similar to what I would like to achieve but I would like to have two sets of double combos on the page.. The two double combo boxes would be unrelated but the selected values would then be passed on to query the db.

Combo Box 1: CarMake | Carmodel

Combo Box 2: State/Province | City


02-28-2005, 06:22 PM
Okay I've put something together. It's not pretty but it does that job. This script will allow you to easily expand to incorporate more double-drop-down menus.

So here it is, I think it's fairly easy to understand what you have to do, just change the values in the array and then initialise the first sets in the HTML. It's should be evident on how to add options and categorys, but if not let me know and I'll give you a hand:thumbsup:

<title>Blankoboy - Multi-drop down changer</title>
<script language="JavaScript">

//We'll firstly define all the different options that are to be added.
var data = new Array();
//This is the first set of double drop down boxes (in your case the models)
data[0] = new Array();
//This is the second set of double drop down boxes (in your case the cities)
data[1] = new Array();

//First set - First Category (0.0)
data[0][0] = new Array();
//First Set, First category, Options 0.0.0 to 0.0.2
data[0][0][0] = new Option("Make1_Model1", "Value1");
data[0][0][1] = new Option("Make1_Model2","Value2");
data[0][0][2] = new Option("Make1_Model3","Value");

data[0][1] = new Array();
//0.1.0 to 0.1.3
data[0][1][0] = new Option("Make2_Model1", "3");
data[0][1][1] = new Option("Make2_Model2", "4");
data[0][1][2] = new Option("Make2_Model3", "5");
data[0][1][3] = new Option("Make2_Model4", "6");

data[0][2] = new Array();
//0.2.0 to 0.2.1
data[0][2][0] = new Option("Make3_Model1", "7");
data[0][2][1] = new Option("Make3_Model2", "8");

//Second Set, First Category (1.0)
data[1][0] = new Array();
data[1][0][0] = new Option("State1_City1", "9");

data[1][1] = new Array();
//1.1.0 to 1.1.2
data[1][1][0] = new Option("State2_City1", "10");
data[1][1][1] = new Option("State2_City2", "11");
data[1][1][2] = new Option("State2_City3", "12");

data[1][2] = new Array();
//1.2.0 to 1.2.1
data[1][2][0] = new Option("State3_City1", "13");
data[1][2][1] = new Option("State3_City2", "14");

function change(what, wrt){
//We'll get the id so we know which part of the huge array to use.
parts = wrt.id.split("_");
j = parts[1];

//Now we'll focus on the element we need to change
what = document.getElementById(what);

//Now we'll get rid of all the current options in the select
for (m=what.options.length-1;m>0;m--)

//Now we'll dynamically add the new options
for (i=0;i<data[j][wrt.selectedIndex].length;i++){
what.options[i]=new Option(data[j][wrt.selectedIndex][i].text,data[j][wrt.selectedIndex][i].value)

<!-- N.B. The id of the drop down menu that you change to change the second drop down menu,
must be in the format of sometext_x where x is an integer >= 0 //-->
<select name="Make" id="Make_0" onChange="change('Model', this);">
<option value="Value1">Make1</option>
<option value="value2">Make2</option>
<option value="value3">Make3</option>
<select name="Model" id="Model">
<option value="Value1">Make1_Model1</option>
<option value="value2">Make1_Model2</option>
<option value="value3">Make1_Model3</option>
<select name="State" id="State_1" onChange="change('Cities', this);">
<option value="state1">state1</option>
<option value="state2">state2</option>
<option value="state3">state3</option>
<select name="Cities" id="Cities">
<option value="state1city1">state1_city1</option>
<option value="state1city2">state1_city2</option>
<option value="state1city3">state1_city3</option>
<option value="state1city4">state1_city4</option>