JSFiddle - React, Tailwind, and code Playground

by masteram

HTML

<form name="tripleplay" action="" method="post">
<select name='List1' onchange="fillSelect(this.selectedOptions[0].label,this.form['List2'])" size="5">
</select>

<select name='List2' onchange="fillSelect(this.selectedOptions[0].label,this.form['List3'])" size="5">
</select>

<select name='List3' onchange="console.log(this.value, this.form['List2'].value, this.form['List1'].value)"  size="5">
</select>

<input type="submit" value="Submit" name="next" />
</form>

JavaScript

var categories = [];

categories["startList"] = ["Wearing Apparel","Books"];

categories["Wearing Apparel"] = ["Men","Women","Children"];
categories["Books"] = ["Biography","Fiction","Nonfiction"];

categories["Men"] = ["Shirts","Ties","Belts","Hats"];
categories["Women"] = ["Blouses","Skirts","Scarves", "Hats"];
categories["Children"] = ["Shorts", "Socks", "Coats", "Nightwear"];

categories["Biography"] = ["Contemporay","Historical","Other"];
categories["Fiction"] = ["Science Fiction","Romance", "Thrillers", "Crime"];
categories["Nonfiction"] = ["How-To","Travel","Cookbooks", "Old Churches"];

var nLists = 3; // number of select lists in the set

fillSelect = function (currCat,currList){

    var step = Number(currList.name.replace(/\D/g,""));

    for (i=step; i<nLists+1; i++) {
        document.forms['tripleplay']['List'+i].length = 0;
        document.forms['tripleplay']['List'+i].selectedIndex = 0;
    }

    var nCat = categories[currCat];

    for (each in nCat) {
        var nOption = document.createElement('option'); 
        //var nData = document.createTextNode(nCat[each]); 
        nOption.setAttribute('value',each); 
        nOption.textContent = nCat[each]; 
        //nOption.appendChild(nData); 
        currList.appendChild(nOption); 
    } 
}

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

init();