PDA

View Full Version : More levels for chained select menu?



Nosilence
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
http://www.dynamicdrive.com/dynamicindex1/chainedmenu/index.htm
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?

Thanks

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

Nosilence
04-11-2013, 08:02 AM
Hello,

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

ajfmrf
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..

Nosilence
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

Thanks
Ralph

vwphillips
04-11-2013, 03:44 PM
<html>
<head>

<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]){
frm[nme+i].length=1;
frm[nme+i].selectedIndex=0;
i++;
}
for (;z0<opts.length;z0++){
if (opts[z0].selected&&ary[opts[z0].value]){
oary=oary.concat(ary[opts[z0].value]);
}
}
if (nxt){
for (;z1<oary.length;z1++){
nxt.options[z1+1]=new Option(oary[z1],oary[z1]);
}
nxt.selectedIndex=0;
}
}
}

function getValue(isValue) {
alert(isValue);
}

function init() {
fillSelect(document.forms[0]['List1'],categories,'List1')
fillSelect(document.forms[0]['sel1'],myarray,'sel1')
}

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

</script>
</head>

<body>
<form action="">

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

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

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

<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>
</form>

</body>
</html>

jscheuer1
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:

http://home.comcast.net/~jscheuer1/side/demos/tidbits/formadd/demo3.htm

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.

Nosilence
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