/    Sign up×
Community /Pin to ProfileBookmark

Help with drop down list boxes

Copy linkTweet thisAlerts:
Sep 28.2005

I have seen this code used throughout the internet. I need help because I edited the code not knowing anything about java. I was able to get my first list box working Model and Package. However, when I added another set I am not sure what the heck to do to get it to work. I am able to select on Type but the Year box doesn’t populate based on New or Used.

Please any help.

Here is the code:
<script LANGUAGE=”JavaScript”>
<!– Original: Jerome Caron ([email protected]) –>

<!– This script and many more are available free online at –>
<!– The JavaScript Source!! [url]http://javascript.internet.com[/url] –>

<!– Begin
package = new Array(
new Array(
new Array(“RT”, ‘RT’),
new Array(“RTS”, “RTS”),
new Array(“RTL”, “RTL”),
new Array(“RTL with Moonroof”, “RTL with Moon roof”),
new Array(“RTL with Moonroof & Honda Satellite-Linked Navigation System™”, “RTL with Moonroof & Honda Satellite-Linked Navigation System™”)
),
new Array(
new Array(“Value Package”, ‘Value Package’),
new Array(“HX”, ‘HX’),
new Array(“LX”, “LX”),
new Array(“LX Special Edition”, “LX Special Edition”),
new Array(“EX”, “EX”),
new Array(“EX Special Edition”, “EX Special Edition”)
),
new Array(
new Array(“GX”, ‘GX’)
),
new Array(
new Array(“Hybrid”, ‘Hybrid’)
),
new Array(
new Array(“2WD LX”, ‘2WD LX’),
new Array(“4WD LX”, “4WD LX”),
new Array(“4WD EX”, “4WD EX”),
new Array(“4WD Special Edition”, “4WD Special Edition”)
),
new Array(
new Array(“2WD LX”, ‘2WD LX’),
new Array(“4WD LX”, “4WD LX”),
new Array(“2WD EX”, “2WD EX”),
new Array(“4WD EX”, “4WD EX”)
)
);
function fillSelectFromArray(selectCtrl, itemArray, goodPrompt, badPrompt, defaultItem)

{
var i, j;
var prompt;
// empty existing items
for (i = selectCtrl.options.length; i >= 0; i–) {
selectCtrl.options[i] = null;
}
prompt = (itemArray != null) ? goodPrompt : badPrompt;
if (prompt == null) {
j = 0;
}
else {
selectCtrl.options[0] = new Option(prompt);
j = 1;
}
if (itemArray != null) {
// add new items
for (i = 0; i < itemArray.length; i++) {
selectCtrl.options[j] = new Option(itemArray[i][0]);
if (itemArray[i][1] != null) {
selectCtrl.options[j].value = itemArray[i][1];
}
j++;
}
// select first item (prompt) for sub list
selectCtrl.options[0].selected = true;
}
}
// End –>
</script>
<script LANGUAGE=”JavaScript”>
<!– Begin
year = new Array(
new Array(
new Array(“2006”, “2006”),
new Array(“2005”, “2005”)
),
new Array(
new Array(“2005”, ‘2005’),
new Array(“2004”, “2004”),
new Array(“2003”, “2003”),
new Array(“2002”, “2002”),
new Array(“2001”, “2001”),
new Array(“2000”, “2000”),
new Array(“1999”, “1999”),
new Array(“1998”, “1998”),
new Array(“1997”, “1997”),
new Array(“1996”, “1996”),
new Array(“1995”, “1995”)
)
);
function fillSelectFromArray(selectCtrl, itemArray, goodPrompt, badPrompt, defaultItem)

{
var i, j;
var prompt;
// empty existing items
for (i = selectCtrl.options.length; i >= 0; i–) {
selectCtrl.options[i] = null;
}
prompt = (itemArray != null) ? goodPrompt : badPrompt;
if (prompt == null) {
j = 0;
}
else {
selectCtrl.options[0] = new Option(prompt);
j = 1;
}
if (itemArray != null) {
// add new items
for (i = 0; i < itemArray.length; i++) {
selectCtrl.options[j] = new Option(itemArray[i][0]);
if (itemArray[i][1] != null) {
selectCtrl.options[j].value = itemArray[i][1];
}
j++;
}
// select first item (prompt) for sub list
selectCtrl.options[0].selected = true;
}
}
// End –>
</script>
<meta name=”Microsoft Theme” content=”none, default”>
</head>

<body leftmargin=”0″ topmargin=”0″ marginwidth=”0″ marginheight=”0″ bgproperties=”fixed” background=”images/hondabkgrnd30.jpg”>

<!–webbot bot=”Include” U-Include=”includes/bannerpg2.htm” TAG=”BODY” –><div align=”left”>
<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″ style=”border-collapse: collapse” bordercolor=”#111111″>
<tr>
<td rowspan=”3″ bgcolor=”#000066″ width=”150″ valign=”top”>
<img src=”images/clear_dot.gif” width=”150″ height=”8″>
<!–webbot bot=”Include” U-Include=”includes/left_info_box.htm” TAG=”BODY” –>
<p align=”center”>&nbsp;<!–webbot CLIENTSIDE bot=”Ws4FpEx” MODULEID=”‘Honda (Project)Service_off.xws'” PREVIEW=”&lt;img src=’images/Service.gif?151651F8′ editor=’Webstyle4’ border=’0’&gt;” startspan –><script src=”xaramenu.js”></script><script Webstyle4 src=”images/service.js”></script><noscript><img src=”images/Service.gif?151651F8″ editor=”Webstyle4″></noscript><!–webbot bot=”Ws4FpEx” endspan i-checksum=”18676″ –></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<!–webbot bot=”Include” U-Include=”includes/left_contact_box.htm” TAG=”BODY” –></td>
<td width=”35″ valign=”top”>
<img src=”images/tl_curve.gif” width=”35″ height=”35″></td>
<td width=”575″ valign=”top”>
<p align=”center”>
<script LANGUAGE=”JavaScript1.2″>
var months=new Array(13);
months[1]=”January”;
months[2]=”February”;
months[3]=”March”;
months[4]=”April”;
months[5]=”May”;
months[6]=”June”;
months[7]=”July”;
months[8]=”August”;
months[9]=”September”;
months[10]=”October”;
months[11]=”November”;
months[12]=”December”;
var time=new Date();
var lmonth=months[time.getMonth() + 1];
var date=time.getDate();
var year=time.getYear();
if (year < 2000)
year = year + 1900;
document.write(“<right>” + lmonth + ” “);
document.write(date + “, ” + year + “</right>”);
</script>
</td>
</tr>
<tr>
<td width=”35″>&nbsp;</td>
<td align=”left” valign=”top” width=”100%”>
<h1>Quick Quote:</h1>
<blockquote>
<form METHOD=”POST” ACTION=”http://toolbox.omnis.com/bin/formmail.pl” onsubmit=”return FrontPage_Form1_Validator(this)” language=”JavaScript” name=”FrontPage_Form1″>
<input type=”hidden” name=”recipient” value=”[email protected]“>
<input type=”hidden” name=”subject” value=”ONLINE QUICK QUOTE REQUEST”>
<input type=”hidden” name=”redirect” value=”http://www.lamacchiahonda.com/thankyou.htm“>
<input type=”hidden” name=”required” value=”Model,Package,type,year,Day_Phone,Name”>
<input type=”hidden” name=”print_blank_fields” value=”1″>
<input type=”hidden” name=”title” value=”QUICK QUOTE REQUEST”>
<input type=”hidden” name=”return_link_url” value=”http://www.lamacchiahonda.com/index.htm“>
<input type=”hidden” name=”return_link_title” value=”Back to Main Page”>
<table border=”0″ cellspacing=”0″ style=”border-collapse: collapse” bordercolor=”#111111″ width=”500″ id=”AutoNumber2″ align=”left” cellpadding=”10″ height=”355″>
<tr>
<td width=”50%” height=”40″><b><font face=”Verdana”>
<font color=”#000066″ size=”2″>Model</font><font size=”2″ color=”#CE0000″>*</font></font><font color=”#000066″ size=”2″><font face=”Verdana”>:</font>&nbsp;
</font></b></td>
<td width=”50%” height=”40″>
<select NAME=”Model” onChange=”fillSelectFromArray(this.form.Package, ((this.selectedIndex == -1) ? null : package[this.selectedIndex-1]));”>
<option VALUE=”-1″>Select Model</option>
<option VALUE=”Ridgeline”>Ridgeline</option>
<option VALUE=”Accord Coupe”>Accord Coupe</option>
<option VALUE=”Accord Hybrid”>Accord Hybrid</option>
<option VALUE=”Accord Sedan”>Accord Sedan</option>
<option VALUE=”Civic Coupe”>Civic Coupe</option>
<option VALUE=”Civic GX NGV”>Civic GX NGV</option>
<option VALUE=”Civic Hybrid”>Civic Hybrid</option>
<option VALUE=”Civic Sedan”>Civic Sedan</option>
<option VALUE=”CR-V”>CR-V</option>
<option VALUE=”Pilot”>Pilot</option>
<option VALUE=”Odyssey”>Odyssey</option>
<option VALUE=”Insight”>Insight</option>
<option VALUE=”S2000″>S2000</option>
<option VALUE=”Element”>Element</option>
</select> </td>
</tr>
<tr>
<td width=”50%” height=”40″><b>
<font face=”Verdana” size=”2″ color=”#000066″>Trim Level Package<br>
&nbsp;</font></b></td>
<td width=”50%” height=”40″><select NAME=”Package” SIZE=”1″>
<option>Select Trim Package</option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
</select></td>
</tr>
<tr>
<td width=”50%” height=”40″><b>
<font face=”Verdana” size=”2″ color=”#000066″>Type:</font></b></td>
<td width=”50%” height=”40″>
<select NAME=”Type” onChange=”fillSelectFromArray(this.form.Year, ((this.selectedIndex == -1) ? null : year[this.selectedIndex-1]));”>
<option VALUE=”-1″>Select Type</option>
<option VALUE=”New”>New</option>
<option VALUE=”Used”>Used</option>
</select> <select NAME=”Year” SIZE=”1″>
<option>Select Year</option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
</select></td>

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@serenitybluffauthorSep 30.2005 — I noticed in the forum there are a few of us looking for the same answer. Because of our lack of JS I am sure that what we are asking must be more than a simple response. Please if someone could enlighten me that would be great.

All I want to be able to do is use two separate list boxes in a form. One set for model and package the other for Type and Year.

Any help here Please.

Thanks ?
Copy linkTweet thisAlerts:
@MjhLkwdSep 30.2005 — .....
Copy linkTweet thisAlerts:
@serenitybluffauthorOct 02.2005 — <!-- TWO STEPS TO INSTALL AUTO DROP DOWN:

  • 1. Copy the coding into the HEAD of your HTML document

  • 2. Add the last code into the BODY of your HTML document -->

    <!-- STEP ONE: Paste this code into the HEAD of your HTML document -->

    <script LANGUAGE="JavaScript">

    <!-- Original: Jerome Caron ([email protected]) -->


    • <!-- This script and many more are available free online at -->

    <!-- The JavaScript Source!! http://javascript.internet.com -->

    <!-- Begin

    package = new Array(

    new Array(

    new Array("RT", 'RT'),

    new Array("RTS", "RTS"),

    new Array("RTL", "RTL"),

    new Array("RTL with Moonroof", "RTL with Moonroof"),

    new Array("RTL with Moonroof & Honda Satellite-Linked Navigation System™", "RTL with Moonroof & Honda Satellite-Linked Navigation System™")

    ),

    new Array(

    new Array("EX", 'EX'),

    new Array("EX Leather Trim", "EX Leather Trim"),

    new Array("EX with Leather and Honda Satellite-Linked Navigation System™", "EX with Leather and Honda Satellite-Linked Navigation System™"),

    new Array("EX V-6", "EX V-6"),

    new Array("EX V-6 6 MT", "EX V-6 6 MT"),

    new Array("LX", "LX"),

    new Array("LX Special Addition", "LX Special Addition"),

    new Array("LX V-6", "LX V-6"),

    new Array("LX V-6 Special Addition", "LX V-6 Special Addition")

    ),

    new Array(

    new Array("Hybrid", 'Hybrid'),

    new Array("Hybrid with Honda Satellite-Linked Navigation System™", "Hybrid with Honda Satellite-Linked Navigation System™")

    ),

    new Array(

    new Array("S2000", 'S2000')

    ),

    new Array(

    new Array("2WD LX", '2WD LX'),

    new Array("4WD LX", "4WD LX"),

    new Array("2WD EX", "2WD EX"),

    new Array("4WD EX", "4WD EX")

    )

    );

    function fillSelectFromArray(selectCtrl, itemArray, goodPrompt, badPrompt, defaultItem)

    {

    var i, j;

    var prompt;

    // empty existing items

    for (i = selectCtrl.options.length; i >= 0; i--) {

    selectCtrl.options[i] = null;

    }

    prompt = (itemArray != null) ? goodPrompt : badPrompt;

    if (prompt == null) {

    j = 0;

    }

    else {

    selectCtrl.options[0] = new Option(prompt);

    j = 1;

    }

    if (itemArray != null) {

    // add new items

    for (i = 0; i < itemArray.length; i++) {

    selectCtrl.options[j] = new Option(itemArray[i][0]);

    if (itemArray[i][1] != null) {

    selectCtrl.options[j].value = itemArray[i][1];

    }

    j++;

    }

    // select first item (prompt) for sub list

    selectCtrl.options[0].selected = true;

    }

    }

    // End -->

    </script>

    <script LANGUAGE="JavaScript">

    <!-- Begin

    modyear = new Array(

    new Array(

    new Array("2006", "2006"),

    new Array("2005", "2005")

    ),

    new Array(

    new Array("2005", '2005'),

    new Array("2004", "2004"),

    new Array("2003", "2003"),

    new Array("2002", "2002"),

    new Array("2001", "2001"),

    new Array("2000", "2000"),

    new Array("1999", "1999"),

    new Array("1998", "1998"),

    new Array("1997", "1997"),

    new Array("1996", "1996"),

    new Array("1995", "1995")

    )

    );

    function fillSelectFromArray2(selectCtrl, itemArray, goodPrompt, badPrompt, defaultItem)



    {

    var i, j;

    var prompt;

    // empty existing items

    for (i = selectCtrl.options.length; i >= 0; i--) {

    selectCtrl.options[i] = null;

    }

    prompt = (itemArray != null) ? goodPrompt : badPrompt;

    if (prompt == null) {

    j = 0;

    }

    else {

    selectCtrl.options[0] = new Option(prompt);

    j = 1;

    }

    if (itemArray != null) {

    // add new items

    for (i = 0; i < itemArray.length; i++) {

    selectCtrl.options[j] = new Option(itemArray[i][0]);

    if (itemArray[i][1] != null) {

    selectCtrl.options[j].value = itemArray[i][1];

    }

    j++;

    }

    // select first item (prompt) for sub list

    selectCtrl.options[0].selected = true;

    }

    }

    // End -->

    </script>

    <meta name="Microsoft Theme" content="none, default">

    </head>



    <td width="50%" height="40"><b><font face="Verdana">

    <font color="#000066" size="2">Model</font><font size="2" color="#CE0000">*</font></font><font color="#000066" size="2"><font face="Verdana">:</font>&nbsp;

    </font></b></td>

    <td width="50%" height="40">

    <select NAME="Model" onChange="fillSelectFromArray(this.form.Package, ((this.selectedIndex == -1) ? null : package[this.selectedIndex-1]));">

    <option VALUE="-1">Select Model</option>

    <option VALUE="Ridgeline">Ridgeline</option>

    <option VALUE="Accord Coupe">Accord Coupe</option>

    <option VALUE="Accord Hybrid">Accord Hybrid</option>

    <option VALUE="Accord Sedan">Accord Sedan</option>

    <option VALUE="Civic Coupe">Civic Coupe</option>

    <option VALUE="Civic GX NGV">Civic GX NGV</option>

    <option VALUE="Civic Hybrid">Civic Hybrid</option>

    <option VALUE="Civic Sedan">Civic Sedan</option>

    <option VALUE="CR-V">CR-V</option>

    <option VALUE="Pilot">Pilot</option>

    <option VALUE="Odyssey">Odyssey</option>

    <option VALUE="Insight">Insight</option>

    <option VALUE="S2000">S2000</option>

    <option VALUE="Element">Element</option>

    </select> </td>

    </tr>

    <tr>

    <td width="50%" height="40"><b>

    <font face="Verdana" size="2" color="#000066">Trim Level Package</font></b></td>

    <td width="50%" height="40"><select NAME="Package" SIZE="1">

    <option VALUE="-1">Select Trim Package</option>

    <option></option>

    <option></option>

    <option></option>

    <option></option>

    <option></option>

    <option></option>

    <option></option>

    <option></option>

    <option></option>

    </select></td>

    </tr>

    <tr>

    <td width="50%" height="40"><b>

    <font face="Verdana" size="2" color="#000066">Type:</font></b></td>

    <td width="50%" height="40">

    <select NAME="Type" onChange="fillSelectFromArray2(this.form.Year, ((this.selectedIndex == -1) ? null : modyear[this.selectedIndex-1]));">

    <option VALUE="-1">Select Type</option>

    <option VALUE="New">New</option>

    <option VALUE="Used">Used</option>

    </select> <select NAME="Year" SIZE="1">

    <option VALUE="-1">Select Year</option>

    <option></option>

    </select></td>

    </tr>

    </body>



    </html>



    Note: fillSelectFromArray2 make sure that for the second function the name of the function in the header and body are a different name.

    This is from a rookie. This is client side code.
    ×

    Success!

    Help @serenitybluff 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 4.29,
    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: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

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

    tipper: @Samric24,
    tipped: article
    amount: 1000 SATS,
    )...