JSFiddle - React, Tailwind, and code Playground

by nethzor

HTML

<form name="dropdownForm" id="dropdownForm">
    <div style="display:none">
    
    <select name="optone" id="stateSel" size="1">
        <option value="" selected="selected">Select state</option>
    </select>
    <br>
    <br>
    <select name="opttwo" id="countySel" size="1">
        <option value="" selected="selected">Please select state first</option>
    </select>
    <br>
    <br>
    <select name="optthree" id="citySel" size="1">
        <option value="" selected="selected">Please select county first</option>
    </select>
    </div>
</form>

JavaScript

var items = [{'value': 'bmw', 
                'category': 'make',
                        'items': [
                            {'value': '2018', 'category': 'year','items':[{'value': 'serie 1', 'category': 'model'}, {'value': 'serie 2', 'category': 'model'}, {'value': 'serie 3', 'category': 'model'}]}, 
                            {'value':'2019', 'category': 'year','items': [{'value': 'serie 1', 'category': 'model'}, {'value': 'serie 2', 'category': 'model'}, {'value': 'serie 3', 'category': 'model'}]}, 
                            {'value':'2020', 'category': 'year','items': [{'value': 'serie 1', 'category': 'model'}, {'value': 'serie 2', 'category': 'model'}, {'value': 'serie 3', 'category': 'model'}, {'value': 'serie 4', 'category': 'model'}]}
                        ]
                    },
            {'value': 'vw', 
                'category': 'make',
                        'items': [
                            {'value': '2018', 'category': 'year', 'items':[{'value': 'polo cross', 'category': 'model'},{'value': 'polo vivo', 'category': 'model'},{'value': 'passat', 'category': 'model'}]}, 
                            {'value':'2019', 'category': 'year','items': [{'value': 'polo cross', 'category': 'model'},{'value': 'polo vivo', 'category': 'model'},{'value': 'r32', 'category': 'model'}]}, 
                            {'value':'2020', 'category': 'year','items': [{'value': 'polo cross', 'category': 'model'},{'value': 'polo vivo 1.6', 'category': 'model'},{'value': 'passat', 'category': 'model'}]},
                            {'value':'2021', 'category': 'year','items': [{'value': 'polo cross', 'category': 'model'},{'value': 'polo vivo', 'category': 'model'},{'value': 'polo 1.0 TSI', 'category': 'model'}]}
                        ]
                    },
                ]
             
window.onload = function () {

var dropdownIndex = 0;
var currentLevel = 0;
var itemsNext = items;

//create dropdowns from first...