Solved

Create 3-level interdependent list using java script and html

Posted on 2008-10-19
9
2,384 Views
Last Modified: 2013-11-23
How do I create a 3-level interdependent list using java script and html? The first selection is "make", the second level is "model" (based on the make selected), and the third level is "year" (based on the model selected). This is being used in a form going through a company called ExactTarget and I do not have a database for this information. The code I have is based on what I found here, but I am unable to modify to make it work for the third level. I am brand new to java script so any help would be greatly appreciated.
var acuramodels = new Array("1.6EL", "1.7EL", "2.2CL", "2.5TL", "3.0CL", "3.2TL", "3.5RL", "CSX", "EL", "Integra", "Legend", "MDX", "NSX", "RDX", "RL", "RSX", "SLX", "TL", "TSX", "Vigor");
var alfaromeomodels = new Array("147", "156", "164", "GTV-6", "Milano", "Spider", "Spider Graduate", "Spider Quadrifoglio", "Spider Veloce");
var alpinemodels = new Array("A310");
var americanmotorsmodels = new Array("Alliance", "AMX", "Concord", "Eagle", "Encore", "Pacer", "Spirit");
 
 
function set_model() {
  var select_make = document.myform.make;
  var select_model = document.myform.model;
  var select_year = document.myform.year;
  var selected_make = select_make.options[select_make.selectedIndex].value;
 
  select_model.options.length=0;
  if (selected_make == "acura"){
    for(var i=0; i<acuramodels.length; i++)
    select_model.options[select_model.options.length] = new Option(acuramodels[i]);
  }
  if (selected_make == "alfa romeo"){
    for(var i=0; i<alfaromeomodels.length; i++)
    select_model.options[select_model.options.length] = new Option(alfaromeomodels[i]);
  }
  if (selected_make == "alpine"){
    for(var i=0; i<alpinemodels.length; i++)
    select_model.options[select_model.options.length] = new Option(alpinemodels[i]);
  }
  if (selected_make == "american motors"){
    for(var i=0; i<americanmotorsmodels.length; i++)
    select_model.options[select_model.options.length] = new Option(americanmotorsmodels[i]);
  }
}
 
 
</script>
 
<body>
 
<form name="myform" method="POST">
  <table>
    <tr>
    <td>Make:</td><td>
    <select name="make" onChange="set_model()">
    <option value="Makes">Select One
    <option value="acura">Acura
    <option value="alfa romeo">Alfa Romeo
	<option value="alpine">Alpine
	<option value="american motors">American Motors
	<option value="aston martin">Aston Martin
	<option value="asuna">Asuna
	<option value="audi">Audi
	<option value="Austin">Austin
	<option value="Austin-Healey">Austin-Healey
	<option value="Avanti">Avanti
	<option value="Bentley">Bentley
	<option value="Bertone">Bertone
	<option value="BMW">BMW
	<option value="Buick">Buick
	<option value="Cadillac">Cadillac
	<option value="Chevrolet">Chevrolet
	<option value="Chrysler">Chrysler
	<option value="Daewoo">Daewoo
	<option value="Daihatsu">Daihatsu
	<option value="Delorean">Delorean
	<option value="Dodge">Dodge
	<option value="Eagle">Eagle
	<option value="Ferrari">Ferrari
	<option value="Fiat">Fiat
	<option value="Fisker">Fisker
	<option value="Ford">Ford
	<option value="Ford (German)">Ford (Germany)
	<option value="Geo">Geo
	<option value="GMC">GMC
	<option value="Honda">Honda
	<option value="Hummer">Hummer
	<option value="Hyundai">Hyundai
	<option value="Infiniti">Infiniti
	<option value="Innocenti">Innocenti
	<option value="International">International
	<option value="Isuzu">Isuzu
	<option value="Jaguar">Jaguar
	<option value="Jeep">Jeep
	<option value="Kia">Kia
	<option value="Lada">Lada
	<option value="Lamborghini">Lamborghini
	<option value="Lancia">Lancia
	<option value="Land Rover">Land Rover
	<option value="Lexus">Lexus
	<option value="Lincoln">Lincoln
	<option value="Lotus">Lotus
	<option value="Maserati">Maserati
	<option value="Maybach">Maybach
	<option value="Mazda">Mazda
	<option value="Mercedes-Benz">Mercedes-Benz
	<option value="Mercury">Mercury
	<option value="Merkur">Merkur
	<option value="MG">MG
	<option value="Mini">Mini
	<option value="Mitsubishi">Mitsubishi
	<option value="Morgan">Morgan
	<option value="Nissan">Nissan
	<option value="Oldsmobile">Oldsmobile
	<option value="Opel">Open
	<option value="Passport">Passport
	<option value="Peugeot">Peugeot
	<option value="Pininfarina">Pininfarina
	<option value="Plymouth">Plymouth
	<option value="Pontiac">Pontiac
	<option value="Porsche">Porsche
	<option value="Renault">Renault
	<option value="Rolls Royce">Rolls Royce
	<option value="Saab">Saab
	<option value="Saturn">Saturn
	<option value="Scion">Scion
	<option value="Seat">Seat
	<option value="Smart">Smart
	<option value="Sterling">Sterling
	<option value="Subaru">Subaru
	<option value="Suzuki">Suzuki
	<option value="Toyota">Toyota
	<option value="Triumph">Triumph
	<option value="VAM/Rambler">VAM/Rambler
	<option value="Volkswagen">Volkswagen
	<option value="Volvo">Volvo
	<option value="Yugo">Yugo
    </select>
    </td>
    </tr><tr>
    <td>Model:</td><td>
    <select name="model" onChange="set_year()">
    <option>------
    </select>
    </td></tr>
    <tr>
      <td>Year:</td>
      <td><select name="year">
    <option>------
    </select></td>
    </tr>
  </table>
</form>

Open in new window

0
Comment
Question by:jwaschow
  • 5
  • 4
9 Comments
 
LVL 44

Accepted Solution

by:
scrathcyboy earned 500 total points
ID: 22754260
See these examples --

http://www.mattkruse.com/javascript/dynamicoptionlist/
http://www.plus2net.com/javascript_tutorial/dropdown-list.php
http://www.fiendish.demon.co.uk/html/javascript/listfill.html

Once you get the idea of two, three is easy.

I do this using a javascript array, as it is more efficient, but to start, just use values in the list options.
0
 

Author Comment

by:jwaschow
ID: 22758510
I'm sorry that I am too new to java to understand how to change any of these examples to work the way I need them to. Specifically it it how to get the third level (year) to work based on the make and model selected. They are all great examples of drop down interdependent lists, I just can't adjust them to my needs. I spent a huge amount of time trying and just can't get it. Any additional help you can provide would be greatly appreciated. Thanks.
0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22760211
It is all done with javascript, that is the only interactive language that can make decisions to change the contents of the options lists based on another options list.  Here from Matt Kruse's page  below --

You see that if you want to get the third level, on the second level choice you ADD OPTIONS --
those options would be the years that the particular model was made.  This code is from his 6 level list


var sixLevel = new DynamicOptionList("L1","L2","L3","L4","L5","L6");
sixLevel.forValue("2").addOptionsTextValue("1","1","2 -->","2");
sixLevel.forValue("2").forValue("2").addOptionsTextValue("1","1","2 -->","2");
sixLevel.forValue("2").forValue("2").forValue("2").addOptionsTextValue("1","1","2 -->","2");
sixLevel.forValue("2").forValue("2").forValue("2").forValue("2").addOptionsTextValue("1","1","2 -->","2");
sixLevel.forValue("2").forValue("2").forValue("2").forValue("2").forValue("2").addOptionsTextValue("1","1","2","2");

Open in new window

0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22760256
Now here it is from his lowest example of vehicles -- you see once again, that on choice of the second level, you add options to make the third level -- in hist case whether 2 door or 4 door.  If you put those 2 code snippets into a text editor, and also have his page on screen, you will be able to see how each is added.

However, in your case, all the items are in an array, which is a very good way to do it, how I would do it.

THerefore you would index an array of years from say 1990 to 2008, so for a particular model, you would create a third options list populated with the years for that model.

You will end up with a LOT of code to get this to work, but it will work perfectly when you get it right.
var makeModel = new DynamicOptionList("MAKE","MODEL","TYPE");
makeModel.addDependentFields("MAKE2","MODEL2","TYPE2");
 
makeModel.forValue("Ford").addOptions("Fiesta","Focus","Taurus"); // Add options if VALUE of option is selected
makeModel.forText("Honda").addOptions("Civic","Accord","Prelude"); // Add these options if TEXT of option is selected
 
makeModel.forValue("Ford").setDefaultOptions("Fiesta");
makeModel.forText("Honda").setDefaultOptions("Accord");
makeModel.forValue("Ford").forValue("Taurus").addOptions("2-door","4-door");
 
makeModel.forField("MODEL").setValues("Focus","Taurus");
makeModel.forField("TYPE").setValues("2-door");
makeModel.forField("MODEL2").setValues("Civic","Prelude");
 
makeModel.forValue("Toyota").addOptionsTextValue("Camry","10-CAMRY","Corolla","20-COROLLA","Celica","30-CELICA"); // Add options with values different from text

Open in new window

0
 

Author Comment

by:jwaschow
ID: 22763933
I keep trying and I just can't get it to work. Here is my latest try using the walk-through directions from Matt Kruse from the above example. I'm thinking there is something that I am missing and once I see it, I will probably be embarrassed. Thanks.

<script type="text/javascript">
var makeModel = new DynamicOptionList("Make", "Model", "Year");
makeModel.addDependentOptions("Model", "Year");
 
makeModel.forValue("Acura").addOptions("1.6EL", "1.7EL", "2.2CL", "2.3CL", "2.5TL", "3.0CL")
makeModel.forValue("Alfa Romeo").addOptions("147","156","164", "GTV-6")
makeModel.forValue("Alpine").addOptions("A310"); 
 
makeModel.forValue("Acura").forValue("1.6EL").addOptions("2001", "2000", "1999", "1998", "1997")
makeModel.forValue("Acura").forValue("1.7EL").addOptions("2004", "2003", "2002")
</script>
</head>
 
<body onLoad="initDynamicOptionLists();">
<form name="myform">
   <table width="300" border="0" cellspacing="2" cellpadding="0">
     <tr>
       <td>Make</td>
       <td><select name="Make">
    <option value="Makes" selected="selected">Select One</option>
    <option value="acura">Acura</option>
    <option value="alfa romeo">Alfa Romeo</option>
	<option value="alpine">Alpine</option>
    </select></td>
     </tr>
     <tr>
       <td>Model</td>
       <td><select name="Model">
           <script>makeModel.printOptions("Model")</script>
       </select></td>
     </tr>
     <tr>
       <td>Year</td>
       <td><select name="Year">
           <script>makeModel.printOptions("Year")</script>
       </select></td>
     </tr>
   </table>
   </form>
 
</body>
</html>

Open in new window

0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22764161
what you are missing is all his javasscript to make the selects work, but looking at them again, they are too complicated for you.  Returning to your original code, what is the TOTAL year range for all models?  ie. oldest and newest.  If you can reply ASAP, we maybe can finish this
0
 

Author Comment

by:jwaschow
ID: 22767573
Sorry, I get up early for work so I didn't get this until I checked here at work. The date range is from 1980-2009, but not every vehicle Make and Model has that range which is my problem in making this work with the simpler scripts. I will tell you this, the next class I take will be on javascript! It seems something pretty important to know when working with websites. I am primarily a graphic/web designer so getting into the developing end of it is a transition. I really appreciate your help, my own IT department wouldn't even help and this is for work!
0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22770520
That date range creates a great deal of code.  The purpose of EE is to point you in the right direction.  If you want a complete working solution for you business, you can click on my name to see how to email me.
0
 

Author Closing Comment

by:jwaschow
ID: 31507669
The solution would have been perfect if I had  more knowledge on javascript. I really appreciate your time and patience.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Binding a Grid in Javascript 5 45
Asp in server side with Mssql Server 7 4 28
asp.net open new page without popup blocker 8 19
Java class and jar 3 25
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
In this post we will learn how to connect and configure Android Device (Smartphone etc.) with Android Studio. After that we will run a simple Hello World Program.
This tutorial will introduce the viewer to VisualVM for the Java platform application. This video explains an example program and covers the Overview, Monitor, and Heap Dump tabs.
Viewers will learn how to properly install Eclipse with the necessary JDK, and will take a look at an introductory Java program. Download Eclipse installation zip file: Extract files from zip file: Download and install JDK 8: Open Eclipse and …

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question