Я хочу создать 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

Надеется, что это помогает!