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

I want to create 4 cascading dropdown list

本文关键字:级联 下拉列表 4个 创建      更新时间:2023-09-26

我想创建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>

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

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

希望这能有所帮助!