修改JSFiddle如何根据上一个下拉菜单中选择的内容进行附加级别的下拉菜单？

问题描述

我正在使用此jsfiddle作为参考：https://jsfiddle.net/patelriki13/m1ezs70o/

是使用国家/地区作为项目的级联下拉列表。我试图在此添加另一个级别，而不是4个级别，而是5个级别。我试图在“ zips”之前添加另一组街道名称的对象，并根据的方式为其添加另一个onchange函数下面的onchange函数之一，但是它不起作用。我该如何实现这一目标？

HTML：

<form name="myform" id="myForm">
  <select id="countySel" size="1">
        <option value="" selected="selected">-- Select Country --</option>
    </select>
     <br>
    <br>
  
    <select id="stateSel" size="1">
        <option value="" selected="selected">-- Select State--</option>
    </select>
    <br>
    <br>    
    <select id="citySel" size="1">
        <option value="" selected="selected">-- Select City--</option>
    </select>
    <br>
    <br>
    <select id="zipSel" size="1">
        <option value="" selected="selected">-- Select Zip--</option>
    </select>
</form>

JAVASCRIPT：

var countryStateInfo = {
    "USA": {
        "California": {
            "Los Angeles": ["90001","90002","90003","90004"],"San Diego": ["92093","92101"]
        },"Texas": {
            "Dallas": ["75201","75202"],"Austin": ["73301","73344"]
        }
    },"India": {
        "Assam": {
            "dispur": ["781005"],"Guwahati" : ["781030","781030"]
        },"Gujarat": {
            "Vadodara" : ["390011","390020"],"Surat" : ["395006","395002"]
        }
    }
}


window.onload = function () {
    
    //Get html elements
    var countySel = document.getElementById("countySel");
    var stateSel = document.getElementById("stateSel"); 
    var citySel = document.getElementById("citySel");
    var zipSel = document.getElementById("zipSel");
    
    //Load countries
    for (var country in countryStateInfo) {
        countySel.options[countySel.options.length] = new Option(country,country);
    }
    
    //County Changed
    countySel.onchange = function () {
         
         stateSel.length = 1; // remove all options bar first
         citySel.length = 1; // remove all options bar first
         zipSel.length = 1; // remove all options bar first
         
         if (this.selectedindex < 1)
             return; // done
         
         for (var state in countryStateInfo[this.value]) {
             stateSel.options[stateSel.options.length] = new Option(state,state);
         }
    }
    
    //State Changed
    stateSel.onchange = function () {        
         
         citySel.length = 1; // remove all options bar first
         zipSel.length = 1; // remove all options bar first
         
         if (this.selectedindex < 1)
             return; // done
         
         for (var city in countryStateInfo[countySel.value][this.value]) {
             citySel.options[citySel.options.length] = new Option(city,city);
         }
    }
    
    //City Changed
    citySel.onchange = function () {
        zipSel.length = 1; // remove all options bar first
        
        if (this.selectedindex < 1)
            return; // done
        
        var zips = countryStateInfo[countySel.value][stateSel.value][this.value];
        for (var i = 0; i < zips.length; i++) {
            zipSel.options[zipSel.options.length] = new Option(zips[i],zips[i]);
        }
    }   
}

任何帮助我指出正确方向的帮助。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）