Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions

Javascript Dependent Drop Downs Problem

Posted on 2004-04-20
Last Modified: 2007-12-19
Hi there,

I am trying to create dependent drop down boxes, using javascript, but having difficulty sending the value when the form is submitted.  Currently, my form has two drop down boxes, and depending on what is chosen from the first drop down box, populates the options in the second drop down box.  This is all working fine.  My only issue is that, when the form is submitted, I need to be able to retrieve the value that was selected in the second drop down box via a request.form comand. Please see the code below for reference.

Any assistance is greatly appreciated.  Thanks, in advance for your help!

Best Regards,


<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
var ask = "-Select-";

var Floral = new Array("Cherry Blossom Rectangle 6.6oz","Floral Leaves Round 5.1oz","Hummingbird with Lily Oval 5.6oz","Chrysanthemum Oval 4.0oz","Rose 3.75oz","Double Rose 3.0oz","Hibiscus Square 5.0oz","Daisy Square 3.0oz","3D Daisy 4.0oz","3D Rose 4.0oz","Dutch Iris 4.0oz","Bearded Iris 5.5oz","Japanese Iris 5.5oz","Lily of the Valley Rectangle 4.2oz","Tulip Rectangle 4.2oz");
var Miscellaneous = new Array("American Flag 5.5oz","Smiley Face Square 5.0oz","Gift Box with Bow 3.5oz");
var Fruits = new Array("Grape Cluster on Branch 4.75oz","Grapes 3.0oz","Apple 5.0oz","Cherry Cluster 3.0oz","Raspberry Cluster 2.5oz","Peach on a Branch 2.5oz","Lemon 2.0oz","Lime 2.0oz");
var Thanksgiving = new Array("Turkey 3.5oz","Turkey Round 3.0oz","Pumpkin/Corn Round 3.0oz");

function dropChange(theSelect, targetSelect)
    txt = theSelect.options[theSelect.selectedIndex].text;
        theArray = Floral;
    else if(txt=="Fruits")
        theArray = Fruits;
    else if(txt=="Thanksgiving")
        theArray = Thanksgiving;  
    else if(txt=="Miscellaneous")
        theArray = Miscellaneous;    
        theArray = Floral;

    addOption(targetSelect, theArray);

function addOption(the_select, the_array)
  the_select.options.length = 0;
  the_select.options[0] = new Option(ask, 0);
  for (loop=1; loop < the_array.length+1; loop++)
    the_select.options[loop] = new Option(the_array[loop-1], the_array[loop-1]);
      the_select.options[loop].value = new Option(the_array[loop-1], the_array[loop-1]);

<form name="form1" method="post" action="">
  <select name="select" onChange="javascript:dropChange(this, this.form.select2)">
    <option value="Floral">Floral</option>
    <option value="Fruits">Fruits</option>
    <option value="Miscellaneous">Miscellaneous</option>
    <option value="Thanksgiving">Thanksgiving</option>
  <select name="select2">
Question by:calebic

Expert Comment

ID: 10875315
Firstly if you want to use the Response.Form method then the page needs to be an ASP page.

Change the page from *.htm to *.asp then include the following before the <html> tag. This also includes the code for collecting the value of the listbox.

<%@ Language=VBScript %>
<%Option Explicit%>
Dim sValue

If Request.Form("Button") = "Submit" then
      sValue = Request.Form("select2")
      If sValue <> "" then
            'What would you like to do here
            Response.Redirect "Value from form: " & Response.Write & "<br>"
      End If
End If

The add a submit button to your form...

<input type="submit" name="Button" value="Submit">
LVL 19

Expert Comment

ID: 10875599
If you still want to use javascript, and all you need is to figure out which option was selected, then you can use the following function:

function getVal() {
  myIndex = document.forms[0].select2.selectedIndex;
  myVal = document.forms[0].select2.options[myIndex].text;

  // do whatever you need to do with myVal down here

then change the form - it just calls myHandle() when the submit button is pressed:
<form name="form1" method="post" action="javascript:myHandle()">
  <select name="select" onChange="javascript:dropChange(this, this.form.select2)">
    <option value="Floral">Floral</option>
    <option value="Fruits">Fruits</option>
    <option value="Miscellaneous">Miscellaneous</option>
    <option value="Thanksgiving">Thanksgiving</option>
  <select name="select2">
  <input type="submit">

not sure if that's what you're looking for, but I hope that helped.

Accepted Solution

pepsichris earned 500 total points
ID: 10876708
Where you're going wrong is in trying to add the Value to Select2 when you've already done it.

Take out the line:

     the_select.options[loop].value = new Option(the_array[loop-1], the_array[loop-1]);

...and then you can retrieve that through some simple ASP:

Dim sSelect1, sSelect2

sSelect1 = Request.Form("select")
sSelect2 = Request.Form("select2")
 Response.Write("The first drop down says: " & sSelect1 & "<br />")
 Response.Write("The second drop down says: " & sSelect2)


Incidentally, you might want to change your body tag to:

 onload="dropChange(document.form1.select, document.form1.select2)"

So the second list gets populated straight away, and therefore looks nicer.

Author Comment

ID: 10884603
Thank you so much!

I really appreciate your help!  You were right on!

Best Regards,


Featured Post

The New “Normal” in Modern Enterprise Operations

DevOps for the modern enterprise offers many benefits — increased agility, productivity, and more, but digital transformation isn’t easy, especially if you’re not addressing the right issues. Register for the webinar to dive into the “new normal” for enterprise modern ops.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Redirect Website for Mobile Devises 9 133
Responsive Design or Mobile Sites? 4 32
Button to go back 3 28
CSS: How do I override in-line styling 11 25
Read about why website design really matters in today's demanding market.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question