我想创建 4 个级联下拉列表

Question

我想创建 4 个级联下拉列表 JavaScript 我在网上遇到了这段代码，但我想在这段代码上添加最后一个输入，最后一个输入取决于 citySelect。请帮助我一直在搜索，我只找到三个级联下拉列表

            <form name="myform" id="myForm">
                <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>
                <br>
                <br>
                <select name="optfour" id="branchSel" size="1">
                    <option value="" selected="selected">Please select branch first</option>
                </select>
            </form>

            <script>

            var stateObject = {
                "California": {
                    "Monterey": ["Salinas", "Gonzales"],
                    "Alameda": ["Oakland", "Berkeley"]
                },
                "Oregon": {
                    "Douglas": ["Roseburg", "Winston"],
                    "Jackson": ["Medford", "Jacksonville"]
                }
            }
            window.onload = function () {
                var stateSel = document.getElementById("stateSel"),
                    countySel = document.getElementById("countySel"),
                    citySel = document.getElementById("citySel");
                for (var state in stateObject) {
                    stateSel.options[stateSel.options.length] = new Option(state, state);
                }
                stateSel.onchange = function () {
                    countySel.length = 1; // remove all options bar first
                    citySel.length = 1; // remove all options bar first
                    if (this.selectedIndex < 1) return; // done   
                    for (var county in stateObject[this.value]) {
                        countySel.options[countySel.options.length] = new Option(county, county);
                    }
                }
                stateSel.onchange(); // reset in case page is reloaded
                countySel.onchange = function () {
                    citySel.length = 1; // remove all options bar first
                    if (this.selectedIndex < 1) return; // done   
                    var cities = stateObject[stateSel.value][this.value];
                    for (var i = 0; i < cities.length; i++) {
                        citySel.options[citySel.options.length] = new Option(cities[i], cities[i]);
                    }
                }
            }

            </script>

Answer 1

我会采用开箱即用的工作解决方案。实施起来更快、更容易。

如：http://plugins.krajee.com/dependent-dropdown/demo

希望这会有所帮助！