View Full Version : More levels for chained select menu?

04-09-2013, 09:02 PM
1) Script Title: Chained Select Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/chainedmenu/index.htm

3) Describe problem: Hello all,
I was need for my website a selection menu. I was get info to look at this page here
This is exactly what I need. Only I want to add more "levels" and don't know how to proceed, because I don't understand JS :(

Can someone help me out?


04-10-2013, 04:26 PM
So,are you saying you want to use 4 or 5 dropdowns chained together??

04-11-2013, 08:02 AM

yes i don't know how much levels i will need. I was hoping to can easy add more levels by adding a simple text in the HTML-code ?!

Thanks for your help

04-11-2013, 01:15 PM
I am sure it can be adapted to suit your needs.

But,without know ing exactly how many levels you are talking about I will be cautious and say that there is more likely is a limit to some degree

I will presume the more levels you go the more confusing it could get..

04-11-2013, 03:30 PM
Hello Bud,

Thanks for your help. I will check how many levels I need and try to keep it small.
This menu I would like to use it to select a datasheet to download of a product. The selection would be like this: Product -> Serie -> Model -> Size -> Type of datasheet.
So this are 5 levels. But maybe i will need a 6th one (I not yet finish the final structure of productcatalog)
If you could help me to modify the script to get 6 levels ... woould be perfect


04-11-2013, 03:44 PM

<script type="text/javascript">

var categories = [];
categories["startList"] = ["Spain","France","Turkey","Greece"]
categories["Spain"] = ["Alicante","Barcelona","Malaga"];
categories["France"] = ["Paris","Nice","Lyon"];
categories["Turkey"] = ["Dalaman","Antalya","Bodrum"];
categories["Greece"] = ["Athens","Rhodes","Zante"];
categories["Alicante"] = ["Benidorm","El Abir","Finestra"];
categories["Barcelona"] = ["Lloret","Santa Suzanna","La Pineda"];
categories["Malaga"] = ["Puerto Banus","Fuengirola","Benalmadena"];
categories["Paris"] = ["Paris","Disneyland","Orly"];
categories["Nice"] = ["Nice","Monaco","Cannes"];
categories["Lyon"] = ["A","B","C"];
categories["Dalaman"] = ["A","B","C"];
categories["Antalya"] = ["d","e","f"];
categories["Bodrum"] = ["g","h","i"];
categories["Athens"] = ["1","2","3"];
categories["Rhodes"] = ["1a","2b","3c"];
categories["Zante"] = ["V","Y","A"];

var myarray = [];
myarray["startList2"] = ["Spain2","France2","Turkey2","Greece2"]
myarray["Spain2"] = ["Alicante2","Barcelona2","Malaga2"];
myarray["France2"] = ["Paris2","Nice2","Lyon2"];
myarray["Turkey2"] = ["Dalaman2","Antalya2","Bodrum2"];
myarray["Greece2"] = ["Athens2","Rhodes2","Zante2"];
myarray["Alicante2"] = ["Benidorm2","El Abir2","Finestra2"];
myarray["Barcelona2"] = ["Lloret2","Santa Suzanna2","La Pineda2"];
myarray["Malaga2"] = ["Puerto Banus2","Fuengirola2","Benalmadena2"];
myarray["Paris2"] = ["Paris2","Disneyland2","Orly2"];
myarray["Nice2"] = ["Nice2","Monaco2","Cannes2"];
myarray["Lyon2"] = ["A2","B2","C2"];
myarray["Dalaman2"] = ["A2","B2","C2"];
myarray["Antalya2"] = ["d2","e2","f2"];
myarray["Bodrum2"] = ["g2","h2","i2"];
myarray["Athens2"] = ["12","22","32"];
myarray["Rhodes2"] = ["1a2","2b2","3c2"];
myarray["Zante2"] = ["V2","Y2","A2"];

function fillSelect(sel,ary,nxt){
if (ary&&sel.form){
var frm=sel.form,nme=sel.name.replace(/\d/g,""),i=Number(sel.name.replace(/\D/g,""))+1,nxt=frm[nxt],opts=sel.options,oary=[],z0=nxt==sel?0:1,z1=0,z1a;
while (frm[nme+i]){
for (;z0<opts.length;z0++){
if (opts[z0].selected&&ary[opts[z0].value]){
if (nxt){
for (;z1<oary.length;z1++){
nxt.options[z1+1]=new Option(oary[z1],oary[z1]);

function getValue(isValue) {

function init() {

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);


<form action="">

<select name='List1' multiple="multiple" style="height:90px;" >
<option value="startList" selected>Select Country</option>
<input type="button" name="" value="Go" onmouseup="fillSelect(this.form['List1'],categories,'List2')"/>

<select name='List2' onchange="fillSelect(this,categories,'List3')">
<option selected>Select Airport</option>
<select name='List3' onchange="getValue(this.value)">
<option selected >Select Resort</option>
<br />
<br />

<select name='sel1' onchange="fillSelect(this,myarray,'sel2')">
<option value="startList2" selected>Select Country</option>
<select name='sel2' onchange="fillSelect(this,myarray,'sel3')">
<option selected>Select Airport</option>
<select name='sel3' onchange="getValue(this.value)">
<option selected >Select Resort</option>

<script> vic=0; </script>
<form name=Show id=Show style="position:absolute;visibility:visible;top:700px;left:0px;" >
<input size=100 name=Show0 >
<input size=10 name=Show1 >
<input size=10 name=Show2 >
<input size=10 name=Show3 >
<input size=10 name=Show4 >
<input size=10 name=Show5 >
<input size=10 name=Show6 >
<input size=10 name=Show7 >
<input size=10 name=Show8 >
<input size=10 name=Show9 ><br>
<textarea name=TA rows=1 cols=100 ></textarea>


04-11-2013, 03:44 PM
I have a new script for this which is ready for wider testing. In it the selects are easy to configure because they are ordinary select elements that you put right on the page. Here's a demo:


Use your browser's "View Source" to get the code. The main script can be made external (I will be doing that soon anyway), if you need help with that, or have any other questions, just ask. The source code is well documented though, so you can see what to do. No configuration is done in the main script, all configuration is done in the selects themselves, and in the small calling script at the end of the page. Some CSS style can also be used if desired. The demo does that and it's documented as well.

04-12-2013, 08:26 AM
Thank guy's for your help.
I was check both solutions. But i'm not yet totaly happy :( . I liked much the version of Vic, but the problem is that in this script, I need to go till last selection before i get "the answer". In my case, not all selection are from same length - some are finish after the 3rd level and other need all 6 levels. In my basic script (I found here on DD) the levels they are not used are grey and not useable and i could finish after 2nd level (if I need) and after push a button "go" i get my answer.... (I know, i'm not easy :D :D )
So would be very cool and helpful, If someone could help me to extend this script http://www.dynamicdrive.com/dynamicindex1/chainedmenu/index.htm to 6 levels.
Thanks to all they help me