# Jscript 3 layer drop down help plz?

**URL:** <https://forum.kirupa.com/t/jscript-3-layer-drop-down-help-plz/258155>\
**Category:** Uncategorized\
**Created:** [April 21, 2008, 3:14pm UTC](https://forum.kirupa.com/t/jscript-3-layer-drop-down-help-plz/258155 "2008-04-21T15:14:47Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Gixm87](https://avatars.discourse-cdn.com/v4/letter/g/ac91a4/32.png) [@Gixm87](https://forum.kirupa.com/u/Gixm87)\
**Post date:** [April 21, 2008, 3:14pm UTC](https://forum.kirupa.com/t/jscript-3-layer-drop-down-help-plz/258155/1 "2008-04-21T15:14:47Z")

</div>

Hello. Ok so heres my problem I Found a javascript with an xml that is a 2 layer country / state selection drop down. I am trying to alter it to be a 3 layer drop down of the same type through xml. Ive searched quite a few times for a 3 layer but i cant find any I have the basis of the 3 layer it just wont work. So could any of you tell me what i should do next. The javascript and the xml is below any tips/help would be GREAT

```auto

var xmlDoc;

// For IE based browsers (tested under IE6 and IE7):
if (window.ActiveXObject) 
{
    xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
}
// For Mozilla based browsers (Netsacpe/Firefox):
else if (document.implementation && document.implementation.createDocument) 
{
    xmlDoc = document.implementation.createDocument("","doc",null);
}

// Turn off asynchronus download.
// Load the entire file before trying to do anything with it.
xmlDoc.async=false;

//load the country/state XML file
xmlDoc.load("promocats.xml");

// Populate selected dropdown list with data from XML file
// (<option value="County/StateName">County/StateName</option>)
// Function used for both Country Fill and State Fill 
function fillList(selectbox,text,value)
{
    var optionValue = document.createElement("option");
    optionValue.text = text;
    optionValue.value = value;
    selectbox.options.add(optionValue);
}

// Populate Country list on page load
// Requires: <body onload="fillCountryList();"> on HTML page
function fillCountryList ()
{
    // Get country element ID
    var countryList = document.getElementById("cbocategory");

    // Clear any current values in select box
    // If JavaScript isn't working existing text will remain
    for (var x = countryList.options.length-1; x >-1; x--)
    {
        countryList.options[x] = null;
    }
    // Fill Country name Array from XML file
    var countryNames = xmlDoc.getElementsByTagName("category");
    // Gets total Number of countries in XML file
    var numberOfCountries = countryNames.length;

    // Loop through Country name Array and populate country select
    for (var i=0; i<=numberOfCountries-1; i++)
    {
        var currentCountry = countryNames*.getAttribute("name");
        fillList(countryList,currentCountry,currentCountry);
    }
}

// Populate State/Province list on Country change
function fillStateList()
{
    // Get State/Province element ID
    var stateList = document.getElementById("cbosubcat")
    
    // Clear any current values in select box
    // If JavaScript isn't working existing text will remain
    for (var x = stateList.options.length-1; x >-1; x--)
    {
        stateList.options[x] = null;
    }
    
    // Get currently selected ID from country element ID
    var countryListSelected = document.getElementById("cbocategory").selectedIndex;
    // Get number of states for current selected Country (populates Array)
    var numberStates = xmlDoc.getElementsByTagName("category")[countryListSelected].getElementsByTagName("subcat").length;
   
   // Loop through States/Province Array and populate State/Province selection for current Country
    for (var i=0; i<=numberStates-1; i++)
    {
        var currentState = xmlDoc.getElementsByTagName("category")[countryListSelected].getElementsByTagName("subcat")*.getAttribute("name");
        fillList(stateList,currentState,currentState);
    }
        
}

// Populate State/Province list on Country change
function fillcatList()
{
    // Get State/Province element ID
    var stateList = document.getElementById("cbocat")
    
    // Clear any current values in select box
    // If JavaScript isn't working existing text will remain
    for (var x = stateList.options.length-1; x >-1; x--)
    {
        stateList.options[x] = null;
    }
    
    // Get currently selected ID from country element ID
    var subcatListSelected = document.getElementById("cbosubcat").selectedIndex;
    // Get number of states for current selected Country (populates Array)
    var numberStates = xmlDoc.getElementsByTagName("subcat")[subcatListSelected].getElementsByTagName("cat").length;
   
   // Loop through States/Province Array and populate State/Province selection for current Country
    for (var i=0; i<=numberStates-1; i++)
    {
        var currentState = xmlDoc.getElementsByTagName("subcat")[subcatListSelected].getElementsByTagName("cat")*.firstchild.nodeValue;
        fillList(stateList,currentState,currentState);
    }
        
}

```

```auto

<?xml version="1.0" encoding="utf-8"?>
<categories author="Michael John Grove" title="category, State-Province selections"
date="2008-Feb-05">
  <category name="Boating">
    <subcat name="Boat manufacturers">
    <cat>Flats Boats</cat>
    <cat>Bay Boats</cat>
    <cat>Bass Boats</cat>
    <cat>Open Fishermen</cat>
    <cat>Luxury Sports Fishermen</cat>
    <cat>Kayaks / Canoes</cat>
    <cat>Aluminum Boats</cat>
    <cat>Misc. Boats</cat>
    <cat>Boating associants & Organizations</cat>
    </subcat>
    
    <subcat name="Accessories">
    <cat>Out Boards</cat>
    <cat>Inboards / Sterndrives</cat>
    <cat>Trolling</cat>
    <cat>Other Motors</cat>
    <cat>Boat Motor Accessories</cat>
    <cat>Motor Service / Parts / Manuals / Etc.</cat>
    </subcat>
    
    <subcat name="Other Boating Products">
    <cat>Trailers/Accessories</cat>
    <cat>Custom Fabricators</cat>
    <cat>Cabin/Cockpit</cat>
    <cat>Electronic/Electrical</cat>
    <cat>Seat/Accessories</cat>
    <cat>Maintenance/Care</cat>
    <cat>Safety Equipment</cat>
    <cat>Boat Accessories</cat>
    <cat>Kayak Accessories</cat>
    <cat>Misc. Products</cat>
    <cat>Docks/Lifts</cat>
    <cat>Finance/Insurance</cat>
    <cat>Hardware</cat>
    <cat>Anchors/Chains</cat>
    <cat>Buoys/Fenders</cat>
    </subcat>

  </category>
 
  <category name="Fishing">
     <subcat name="Fresh Water Fishing">
    <cat>Reels</cat>
    <cat>Rods</cat>
    <cat>Lures</cat>
    <cat>Terminal Tackle</cat>
    <cat>Accessories</cat>
    </subcat>
    
    <subcat name="Salt Water Fishing">
    <cat>Reels</cat>
    <cat>Rods</cat>
    <cat>Lures</cat>
    <cat>Terminal Tackle</cat>
    <cat>Accessories</cat>
    </subcat>
    
    <subcat name="Other Fishing Products / Services">
    <cat>Rigged Bait, Scent</cat>
    <cat>Guides / Charters</cat>
    <cat>Destinations</cat>
    <cat>Apparel</cat>
    <cat>Fly Fishing</cat>
    <cat>Carp Fishing</cat>
    <cat>Misc. Fishing</cat>
    <cat>Ice Fishing</cat>
    <cat>Reel/Rod Repair</cat>
    <cat>Conservation Associations</cat>
    <cat>State/Wildlife Agencies</cat>
    <cat>Fishing Forums</cat>
    <cat>Fishing Tournaments</cat>
    </subcat>
</categories>

```

---

<div class="post-metadata">

**Author:** ![rikmg67](https://avatars.discourse-cdn.com/v4/letter/r/74df32/32.png) [@rikmg67](https://forum.kirupa.com/u/rikmg67)\
**Post date:** [July 4, 2008, 9:55am UTC](https://forum.kirupa.com/t/jscript-3-layer-drop-down-help-plz/258155/2 "2008-07-04T09:55:25Z")

</div>

This is great could this be modified for a search function? would it be as easy as putting it into a form field and querying the db?