Dynamic Javascript Help!?

[JasonG]

I've been toying with Javascript drop-down menus to enhance our website's ease of use and to get customers to the correct product much quicker.

Unfortunately I've hit a block and can't figure out how to finish this feature off. Below is the Javascript so far, hopefully it will give you an idea of how it should look...

<script type="text/javascript">
var DensioniPod = new DynamicOptionList();
DensioniPod.addDependentFields("MAKE","MODEL");
DensioniPod.forValue("Alfa Romeo").addOptions("147","156","GT");
DensioniPod.forValue("Audi").addOptions("A2","A3","A4","A5 / S5","A6 / S6","A8 / S8","Q7","TT");
DensioniPod.forValue("BMW").addOptions("1 Series","3 Series","5 Series","6 Series","7 Series","Compact","X3","X5","z3","Z4","Z8");
DensioniPod.forValue("Citroen").addOptions("C1");
DensioniPod.forValue("Fiat").addOptions("All Models");
DensioniPod.forValue("Ford").addOptions("All Models");
DensioniPod.forValue("Honda").addOptions("Accord","City","Civic","CR-V","Element","Fit","FR-V","Insight","Jazz","Legend","Odessey","Pilot","Ridgeline","S2000");
DensioniPod.forValue("Lexus").addOptions("RX400h");
DensioniPod.forValue("Maserati").addOptions("All Models");
DensioniPod.forValue("Mazda").addOptions("1","2","3","323","6","626","MX-5","RX-7","RX-8");
DensioniPod.forValue("Mercedes").addOptions("A Class","B Class","C Class","CL Class","CLK Class","CLS Class","E Class","G Class","GL Class","M Class","ML Class","R Class","S Class","SL Class","SLK
Class","SLR Class");
DensioniPod.forValue("Mini").addOptions("R55","R56");
DensioniPod.forValue("Peugeot").addOptions("107","207","307","308","407","607","807");
DensioniPod.forValue("Porsche").addOptions("911","Boxster","Cayenne","Cayman");
DensioniPod.forValue("Renault").addOptions("Clio","Espace","Kangoo","Laguna","Master","Megane","Modus","Scenic","Trafic","Twingo","Velsatis",");
DensioniPod.forValue("Rover").addOptions("25","45","MG-F");
DensioniPod.forValue("Saab").addOptions("9-3");
DensioniPod.forValue("Seat").addOptions("Altea","Leon","Toledo","Other Models");
DensioniPod.forValue("Skoda").addOptions("Fabia","Octavia","Superb");
DensioniPod.forValue("Smart").addOptions("ForFour");
DensioniPod.forValue("Suzuki").addOptions("Grand Vitara","Swift","SX4");
DensioniPod.forValue("Toyota").addOptions("Amazon","Avensis","Aygo","Corolla","Land Cruiser","MR2","Previa","RAV 4","Yaris");
DensioniPod.forValue("Volvo").addOptions("S40","V50","XC90","Other Models");
DensioniPod.forValue("Volkswagen").addOptions("Beetle","Bora","Golf","Lupo","Passat","Polo","Sharan","Touran","Toureg");
</script>

What I need to do to complete this is add in two more options after the visitor has chosen a vehicle model. The first being "Vehicle Year" the second being "Factory-Fit Radio" - these need to be inserted and populated with data relevant to the Vehicle Model (eg. an Audi A4 from 2002 would only have either a 'Symphony' or 'Concert' radio.)

One the visitor has chosen the Radio, they need to automatically be linked to the compatible product, I'm hoping the process will go: Make -> Model -> Year -> Radio -> Product eg. Audi -> A4 -> 2002 - > Concert -> iPod Interface.

If anyone has any advice or knows what I need to add into the script to make it all work then your help is much appreciated!

 

[FireFleur]

I take it you are using a library.

var DensioniPod = new DynamicOptionList();

That is the actual code, what you have shown is just the data being added probably via an append mechanism.

DynamicOptionList is what you need to look at to see how the code should work.

If you can supply as an array in one shot it would make the code smaller and less noisy.

 

[IS-James]

I know this isn't answering your question but drop down menus using css are a lot easier to manage and are also accessible for people who have javascript turned off.

There are a lot of tutorials on how to do css menus if you go down this route just search for 'CSS drop down menu' .

 

[FireFleur]

Yes, CSS is a nice way of doing it, you can use JavaScript and then manipulate the DOM.

But both approaches do make the information show, the CSS one is perhaps less blocked than JavaScript so more likely to be enabled in most of the normal browsers, elinks being the exception.