Jump to content

multiple drop down submit


Recommended Posts


I am new to HTMLprogramming

I got some code online which has multiple dropdowns but when "show selections " is pressed.it alerts the selected items.

My need is, it should submit all the selected items from dropdown


<title> 1- to 4-level Drop Down</title>
<style type="text/css">
.DDlist { display:none; }

<script type="text/javascript">
// From: http://www.codingforums.com/showthread.php?t=202456
// and: http://www.codingforums.com/showthread.php?t=169465
// Modified for 1 to 4 (+) level drop down selections

var categories = [];
  categories["startList"] = ["Apparel","Books",'Radio','True','False'];        // Level 1  (True|False is 1 level only)

categories["Apparel"] = ["Men","Women"];                         // Level 2
  categories["Men"] = ["Shirts","Ties","Belts"];                    // Level 3
    categories['Shirts'] = ['Tux','Button-down','Polo',"T's"]         //  Level 4
    categories['Ties'] = ['Silk','String','Bow']                      //  Level 4
    categories['Belts'] = ['Leather','Cloth']                         //  Level 4

  categories["Women"] = ["Blouses","Skirts","Scarves"];             // Level 3
    categories["Blouses"] = ["Silk","Cotton","Polyester"];             // Level 4 only
    categories["Skirts"] = ["Full","Pleated"];                         // Level 4 only
    categories["Scarves"] = ["Head","Neck","Waist"];                   // Level 4 only

categories["Books"] = ["Biography","Fiction","Nonfiction"];      // Level 2
  categories["Biography"] = ["Contemporary","Historical","Other"];  // Level 3 only
  categories["Fiction"] = ["Science","Romance"];                    // Level 3 only
  categories["Nonfiction"] = ["How-To","Travel","Cookbooks"];       // Level 3 only

categories['Radio'] = ['AM','FM','HD'];                          // Level 2 only

var nLists = 4; // number of lists in the set
function fillSelect(currCat,currList){
  var step = Number(currList.name.replace(/\D/g,""));
  for (i=step; i<nLists+1; i++) {
    document.forms[0]['List'+i].length = 1;
    document.forms[0]['List'+i].selectedIndex = 0;
    document.getElementById('List'+i).style.display = 'none';
  var nCat = categories[currCat];
  if (nCat != undefined) { 
    document.getElementById('List'+step).style.display = 'inline';
    for (each in nCat) 	{
      var nOption = document.createElement('option'); 
      var nData = document.createTextNode(nCat[each]); 

function getValues() { 
  var str = '';
  str += document.getElementById('List1').value+'\n';
  for (var i=2; i<=nLists; i++) {
    if (document.getElementById('List'+i).selectedIndex != 0) {
      str += document.getElementById('List'+i).value+'\n'; }

function init() { fillSelect('startList',document.forms[0]['List1']); }

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

<form action="" onsubmit="return false">

<select name='List1' id="List1" onchange="fillSelect(this.value,this.form['List2'])">
<option selected>Make a selection</option>
</select> &nbsp;

<select name='List2' id="List2" onchange="fillSelect(this.value,this.form['List3'])" class="DDlist">
<option selected>Make a selection</option>
</select> &nbsp;

<select name='List3' id="List3" onchange="fillSelect(this.value,this.form['List4'])" class="DDlist">
<option selected >Make a selection</option>
</select> &nbsp;

<select name='List4' id="List4" class="DDlist">
<option selected >Make a selection</option>
</select> &nbsp;

<!-- can add more levels if desired as "List5"+ -->
<button onclick="getValues()">Show selections</button>


How to modify it .Please suggest


Thanks with regards

Ravi K

Link to comment
Share on other sites

This doesn't require anything particularly special.

If you want AJAX, you can change  the `getValues()` function to send an AJAX request with the FormData object as the payload. Look here: https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects

If you don't need AJAX, then a standard form submission would take care of this easily. Remove the onClick method and change the button type to "submit". That would submit as per a normal form. (Sending through the action URL)

Link to comment
Share on other sites


Now am able to submit it.

But while submitting it shows output as 


instead how to link above code with values. 

I mean as  List1=0&List2=1&List3=2&List4=3 

Is there a way to link....but in array same names can be used as apparel men etc

but while submit i need it as values..How to link it

Please suggest


Thanks with Regards

Ravi K

Link to comment
Share on other sites

Normally you would use server side language such as PHP, to read the submitted index names ('List1', List2 etc) and there values. Because there is no 'action' attribute with url with no 'method', it will submit to itself using default  'method' of GET. This means the page must use the server side language extension *.php to read the submitted form data.

Link to comment
Share on other sites


Thanks for the reply.

Actually form action  i have changed and method to post.

here my problem is , when it sends to server as "List1=Apparel&List2=Men&List3=Shirts&List4=Tux "

i am parsing the string using c code for alphabets..i remove all the alpahbets and =&.. so that only values are available and i can use it.

for this multiple dropdown also, i need values so that i can parse alphabets.

How to do it.Please help


Thanks with Regards

Ravi K


Link to comment
Share on other sites

If you can figure out a method to string manipulate it, you could turn it into some array monstrosity, but you should be able to create a dictionary type thing from it.

If you split the `List1 etc` by `&` and then split by `=`, you'll  have an array that hopefully looks similar in structure to something like this.

  ["List1", "Apparel"],
  ["List2", "Men"],
  ["List3", "Shirts"],
  ["List4", "Tux"]

I'm not too familiar with C, personally, but you could look into this for splitting and using a dictionary type structure:

Link to comment
Share on other sites

I don't understand? it seems you retrieving all submitted post data using


on its own, when you can target specific key of posted data using

Request.Form("List1"); //shows value Apparel

Request.Form("List2"); /// shows Men


without the need of splitting or removing?

If you are sending as a complete string of  "List1=Apparel&List2=Men&List3=Shirts&List4=Tux", that seems pointless, as that's  what Request.Form will contain?


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...