/    Sign up×
Community /Pin to ProfileBookmark

Four drop-downs auto-options

Copy linkTweet thisAlerts:
Feb 24.2003

Hi all!!

I’ve been using a snippet I found at [url]http://javascript.internet.com/forms/dropdown-box-population.html[/url] to populate three drop-down boxes automatically based on the choices made in the previous box. Now I want to expand this to a fourth level, but, being the JavaScript illiterate beginner that I am, I can’t seem to hit it right so it will work with my fourth drop-down box. Who can suggest how to do that?

Thanks a bunch!!!!

Natalia

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@cyberadeFeb 24.2003 — Have a look at this code. As well as a fourth drop-down box, I've also included a graphic representation of how it works.

I hope it helps.

<HTML>
<HEAD>
<TITLE>Drop-Down Forms Test</TITLE>

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
var arrItems1 = new Array();
var arrItemsGrp1 = new Array();

arrItems1[3] = "Truck";
arrItemsGrp1[3] = 1;
arrItems1[4] = "Train";
arrItemsGrp1[4] = 1;
arrItems1[5] = "Car";
arrItemsGrp1[5] = 1;

arrItems1[6] = "Boat";
arrItemsGrp1[6] = 2;
arrItems1[7] = "Submarine";
arrItemsGrp1[7] = 2;

arrItems1[0] = "Planes";
arrItemsGrp1[0] = 3;
arrItems1[1] = "Ultralight";
arrItemsGrp1[1] = 3;
arrItems1[2] = "Glider";
arrItemsGrp1[2] = 3;

var arrItems2 = new Array();
var arrItemsGrp2 = new Array();

arrItems2[21] = "747";
arrItemsGrp2[21] = 0
arrItems2[22] = "Cessna";
arrItemsGrp2[22] = 0

arrItems2[31] = "Kolb Flyer";
arrItemsGrp2[31] = 1
arrItems2[34] = "Kitfox";
arrItemsGrp2[34] = 1

arrItems2[35] = "Schwietzer Glider";
arrItemsGrp2[35] = 2

arrItems2[99] = "Chevy Malibu";
arrItemsGrp2[99] = 5
arrItems2[100] = "Lincoln LS";
arrItemsGrp2[100] = 5
arrItems2[57] = "BMW Z3";
arrItemsGrp2[57] = 5

arrItems2[101] = "F-150";
arrItemsGrp2[101] = 3
arrItems2[102] = "Tahoe";
arrItemsGrp2[102] = 3

arrItems2[103] = "Freight Train";
arrItemsGrp2[103] = 4
arrItems2[104] = "Passenger Train";
arrItemsGrp2[104] = 4

arrItems2[105] = "Oil Tanker";
arrItemsGrp2[105] = 6
arrItems2[106] = "Fishing Boat";
arrItemsGrp2[106] = 6

arrItems2[200] = "Los Angelas Class";
arrItemsGrp2[200] = 7
arrItems2[201] = "Kilo Class";
arrItemsGrp2[201] = 7
arrItems2[203] = "Seawolf Class";
arrItemsGrp2[203] = 7

var arrItems3 = new Array();
var arrItemsGrp3 = new Array();

arrItems3[3211] = "Value 1";
arrItemsGrp3[3211] = 21
arrItems3[3212] = "Value 2";
arrItemsGrp3[3212] = 21

arrItems3[3221] = "Value 1";
arrItemsGrp3[3221] = 22
arrItems3[3222] = "Value 2";
arrItemsGrp3[3222] = 22

arrItems3[3311] = "Value 1";
arrItemsGrp3[3311] = 31
arrItems3[3312] = "Value 2";
arrItemsGrp3[3312] = 31

arrItems3[3341] = "Value 1";
arrItemsGrp3[3341] = 34
arrItems3[3342] = "Value 2";
arrItemsGrp3[3342] = 34

arrItems3[3351] = "Value 1";
arrItemsGrp3[3351] = 35
arrItems3[3352] = "Value 2";
arrItemsGrp3[3352] = 35

arrItems3[3361] = "Value 1";
arrItemsGrp3[3361] = 101
arrItems3[3362] = "Value 2";
arrItemsGrp3[3362] = 101

arrItems3[3371] = "Value 1";
arrItemsGrp3[3371] = 102
arrItems3[3372] = "Value 2";
arrItemsGrp3[3372] = 102

arrItems3[3381] = "Value 1";
arrItemsGrp3[3381] = 103
arrItems3[3382] = "Value 2";
arrItemsGrp3[3382] = 103

arrItems3[3391] = "Value 1";
arrItemsGrp3[3391] = 104
arrItems3[3392] = "Value 2";
arrItemsGrp3[3392] = 104

arrItems3[3401] = "Value 1";
arrItemsGrp3[3401] = 99
arrItems3[3402] = "Value 2";
arrItemsGrp3[3402] = 99

arrItems3[3411] = "Value 1";
arrItemsGrp3[3411] = 100
arrItems3[3412] = "Value 2";
arrItemsGrp3[3412] = 100

arrItems3[3421] = "Value 1";
arrItemsGrp3[3421] = 57
arrItems3[3422] = "Value 2";
arrItemsGrp3[3422] = 57

arrItems3[3431] = "Value 1";
arrItemsGrp3[3431] = 105
arrItems3[3432] = "Value 2";
arrItemsGrp3[3432] = 105

arrItems3[3441] = "Value 1";
arrItemsGrp3[3441] = 106
arrItems3[3442] = "Value 2";
arrItemsGrp3[3442] = 106

arrItems3[3451] = "Value 1";
arrItemsGrp3[3451] = 200
arrItems3[3452] = "Value 2";
arrItemsGrp3[3452] = 200

arrItems3[3461] = "Value 1";
arrItemsGrp3[3461] = 201
arrItems3[3462] = "Value 2";
arrItemsGrp3[3462] = 201

arrItems3[3471] = "Value 1";
arrItemsGrp3[3471] = 203
arrItems3[3472] = "Value 2";
arrItemsGrp3[3472] = 203


function selectChange(control, controlToPopulate, ItemArray, GroupArray)
{
var myEle ;
var x ;
// Empty the second drop down box of any choices
for (var q=controlToPopulate.options.length;q>=0;q--) controlToPopulate.options[q]=null;
if (control.name == "firstChoice") {
// Empty the third drop down box of any choices
for (var q=myChoices.thirdChoice.options.length;q>=0;q--) myChoices.thirdChoice.options[q] = null;
}
// ADD Default Choice - in case there are no values
myEle = document.createElement("option") ;
myEle.value = 0 ;
myEle.text = "[SELECT]" ;
controlToPopulate.add(myEle) ;
// Now loop through the array of individual items
// Any containing the same child id are added to
// the second dropdown box
for ( x = 0 ; x < ItemArray.length ; x++ )
{
if ( GroupArray[x] == control.value )
{
myEle = document.createElement("option") ;
myEle.value = x ;
myEle.text = ItemArray[x] ;
controlToPopulate.add(myEle) ;
}
}
}
// End -->
</SCRIPT>

</HEAD>

<!-- STEP TWO: Copy this code into the BODY of your HTML document -->

<BODY>

<FORM NAME=MYCHOICES>

<TABLE ALIGN="center">
<TR>
<TD>
<SELECT ID=FIRSTCHOICE NAME=FIRSTCHOICE ONCHANGE="selectChange(this, myChoices.secondChoice, arrItems1, arrItemsGrp1);">
<OPTION VALUE=0 SELECTED>[SELECT]</OPTION>
<OPTION VALUE=1>Land</OPTION>
<OPTION VALUE=2>Sea</OPTION>
<OPTION VALUE=3>Air</OPTION>
</SELECT>
</TD><TD>
<SELECT ID=SECONDCHOICE NAME=SECONDCHOICE ONCHANGE="selectChange(this, myChoices.thirdChoice, arrItems2, arrItemsGrp2);">
</SELECT>
<SELECT ID=THIRDCHOICE NAME=THIRDCHOICE ONCHANGE="selectChange(this, myChoices.fourthChoice, arrItems3, arrItemsGrp3);">
</SELECT>
<SELECT ID=FOURTHCHOICE NAME=FOURTHCHOICE>
</SELECT>
</TD>
</TR>
</TABLE>

<BR><BR>

<TABLE ALIGN="CENTER" BORDER="3">

<TR ALIGN="center">
<TD>1<BR>2<BR>3</TD><TD>LAND<BR>SEA<BR>AIR</TD>
</TR>

<TR ALIGN="center">
<TD>Array<BR>Group<BR>1</TD>
<TD>3<BR>4<BR>5</TD><TD>Truck<BR>Train<BR>Car</TD>
<TD>6<BR>7</TD><TD>Boat<BR>Submarine</TD>
<TD>0<BR>1<BR>2</TD><TD>Planes<BR>Ultralight<BR>Glider</TD>
</TR>

<TR ALIGN="center">
<TD>Array<BR>Group<BR>2</TD>
<TD>21<BR>22</TD><TD>747<BR>Cessna</TD>
<TD>31<BR>34</TD><TD>Kolb Flyer<BR>Kitfox</TD>
<TD>35</TD><TD>Schwietzer Glider</TD>
<TD>101<BR>102</TD><TD>F-150<BR>Tahoe</TD>
<TD>103<BR>104</TD><TD>Freight Train<BR>Passenger Train</TD>
<TD>99<BR>100<BR>57</TD><TD>Cherry Malibu<BR>Lincoln LS<BR>BMW Z3</TD>
<TD>200<BR>201<BR>203</TD><TD>Los Angelinas Class<BR>Kilo Class<BR>Seawolf</TD>
</TR>

<TR ALIGN="center">
<TD>Array<BR>Group<BR>3</TD>
<TD>3211<BR>3212</TD><TD>Value 1<BR>Value 2</TD>
<TD>3221<BR>3222</TD><TD>Value 1<BR>Value 2</TD>
<TD>3311<BR>3312</TD><TD>Value 1<BR>Value 2</TD>
<TD>3341<BR>3342</TD><TD>Value 1<BR>Value 2</TD>
<TD>3351<BR>3352</TD><TD>Value 1<BR>Value 2</TD>
<TD>3361<BR>3362</TD><TD>Value 1<BR>Value 2</TD>
<TD>3371<BR>3372</TD><TD>Value 1<BR>Value 2</TD>
<TD>3381<BR>3382</TD><TD>Value 1<BR>Value 2</TD>
<TD>3391<BR>3392</TD><TD>Value 1<BR>Value 2</TD>
<TD>3401<BR>3402</TD><TD>Value 1<BR>Value 2</TD>
<TD>3411<BR>3412</TD><TD>Value 1<BR>Value 2</TD>
<TD>3421<BR>3422</TD><TD>Value 1<BR>Value 2</TD>
<TD>3431<BR>3432</TD><TD>Value 1<BR>Value 2</TD>
<TD>3441<BR>3442</TD><TD>Value 1<BR>Value 2</TD>
<TD>3451<BR>3452</TD><TD>Value 1<BR>Value 2</TD>
<TD>3461<BR>3462</TD><TD>Value 1<BR>Value 2</TD>
<TD>3471<BR>3472</TD><TD>Value 1<BR>Value 2</TD>
</TR>

</TABLE>

</FORM>

</BODY>
</HTML>
Copy linkTweet thisAlerts:
@cyberadeFeb 24.2003 — Oops...looks like some formatting errors slipped into my last post.

All the 'Name's and 'ID's should have the first part in lower case and the last with a leading uppercase - like this 'firstChoice'.

Sorry about that.

Also if you want the fourth box to clear down on a new selection you'll need to add ...

<i>
</i>if (control.name == "firstChoice") {
// Empty the fourth drop down box of any choices
for (var q=myChoices.fourthChoice.options.length;q&gt;=0;q--) myChoices.fourthChoice.options[q] = null;
}

...into the selectChange function immediately after the same bit of code that clears down the thirdChoice.
Copy linkTweet thisAlerts:
@NatuScapeauthorFeb 24.2003 — Hello there!!

Thank you!!! Aside from not being sure about the coding, I was also making a few syntax/spelling mistakes and your reminding me of the lowercase/uppercase thingy totally made me see it!!!!!

Thanks a bunch!!!

Natalia
×

Success!

Help @NatuScape spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...