Cascading Dropdown Menu

JavaScript
1

Hi, I want to know how to create a drop down menu that has a category and subcategory option. Each subcategory will have a link and when the user clicks the submit button, they will be brought to this link. So for example the user clicks on fruit as a category and then clicks on apples, they will be taken to apples.html however if they click on cars in the category section, all they can see in the subcategory section will be cars so for example bmw, toyota etc… The Sub categories will depend on what the user clicks on for category.
Attached is the code I have so far.

<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title></title>
</head>
<script type="text/javascript">
var categories = new Array("Fruits", "Vegetables", "Cars", "Colours", "Flowers", );
var items = new Array();
items["Fruits"] = new Array("Bananas", "Apples", "Grapes", "Oranges");
items["Vegetables"] = new Array("Carrots", "Onions", "Lettuce", "Brocolli");
items["Cars"] = new Array("BMW", "Ferrari", "Toyota", "Mitsubisi");
items["Colours"] = new Array("Black", "Yellow", "Blue", "Red");
items["Flowers"] = new Array("Rose", "Dafodils", "Daisies", "Violets");


function resetForm(theForm) {
  /* reset categories */
  theForm.categories.options[0] = new Option("Please select a subject", "");
  for (var i=0; i<categories.length; i++) {
    theForm.categories.options[i+1] = new Option(categories[i], categories[i]);
  }
  theForm.categories.options[0].selected = true;
  /* reset items */
  theForm.items.options[0] = new Option("Please select a question", "");
  theForm.items.options[0].selected = true;
}

function updateModels(theForm) {
  var make = theForm.categories.options[theForm.categories.options.selectedIndex].value;
  var newModels = items[make];
  theForm.items.options.length = 0;
  theForm.items.options[0] = new Option("Please select a question", "");
  for (var i=0; i<newModels.length; i++) {
    theForm.items.options[i+1] = new Option(newModels[i], newModels[i]);
  }
  theForm.items.options[0].selected = true;
}

</script>
<body>

<form name="autoSelectForm" action="" method="post">
<select size="1" name="categories" onchange="updateModels(this.form)">
</select>
<select size="1" name="items" onclick = "">
</select>
<input type="submit">
</form>
<script type="text/javascript">
  resetForm(document.autoSelectForm);
</script>

</body>
</html>
2

The code below will generate a location.href with the item name in it.I have modified your code somewhat by putting the Category options into the HTML.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Form Submit</title>
<style type="text/css">
body { font-family:arial, helvetica, sans-serif; font-weight:normal; font-size:13px; color:#000; text-align:left; margin:3px 0px; }
#wrap { width:500px; height:500px; margin:20px;  }
select { width:150px; }
</style>
</head>

<body>

<div id="wrap">
  <form name="myForm" action method="post">
    <select name="categories" onchange="updateModels(this.form)">
    <option>Please select</option>
    <option>Fruits</option>
    <option>Vegetables</option>
    <option>Cars</option>
    <option>Colours</option>
    <option>Flowers</option>
    </select> <select name="items"></select>
    <!-- <input id="B1" type="button" onclick="checkIt(this.form)" value="Submit"> -->
    <input id="B1" type="button" value="Submit">
  </form>
</div>
<!-- end wrap -->
<script type="text/javascript">
var items = [];
items.Fruits = ["Bananas", "Apples", "Grapes", "Oranges"];
items.Vegetables = ["Carrots", "Onions", "Lettuce", "Brocolli"];
items.Cars = ["BMW", "Ferrari", "Toyota", "Mitsubisi"];
items.Colours = ["Black", "Yellow", "Blue", "Red"];
items.Flowers = ["Rose", "Daffodils", "Daisies", "Violets"];
// ---
function updateModels(theForm) 
 { if(theForm.categories.selectedIndex<1){return false; }
   var op=theForm.categories.options;
   var newModels = items[op[op.selectedIndex].value];
   theForm.items.options.length = 0;
   theForm.items.options[0] = new Option("Please select", "");
   theForm.items.options[0].selected = true;
   for (var i=0; i<newModels.length; i++) 
   { theForm.items.options[i+1] = new Option(newModels[i], newModels[i]); }  
 }
// ---
// check both selections have been made
 document.getElementById("B1").onclick=function(event)
  { event=event || window.event;
    var targElem = event.target || event.srcElement;
    var thisForm=targElem.parentNode;
    if(thisForm.categories.selectedIndex>0 && thisForm.items.selectedIndex>0)
      { var itemsP=thisForm.items;
        location.href= itemsP[itemsP.selectedIndex].value+".htm"; }
    else { return false; } 
  }
//
</script>

</body>

</html>
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.