I need to have dynamic dropdownlist ie when selecting a drop down release the second

Next I have a question where I have 3 drop down list and when I select 1 dropdown it releases the other one, it is connecting to my bank and it brings the result of my select via while and it shows in my drop down list, the complicated one is that I have to add another 1 dropdown list and I'm not getting it.

Example: Select COUNTRY > STATE > CITY > NEIGHBORHOOD

follow the code:

<div class="row">
        <div class="col-md-3">
            <label >PAIS</label>
            <select id="stateSel" name="stateSel">
                <option value="">Selecione</option>
            </select>

        </div>



        <div class="col-md-4">
            <label > ESTADO</label>
            <select id="countySel" name="countySel">
                <option value="">Selecione</option>
            </select>



        </div>
        <div class="col-md-5">
            <label">CIDADE</label>
            <select id="citySel" name="citySel">
                <option value="">Selecione</option>
            </select>
        </div>
        <div class="col-md-5">
            <label >BAIRRO</label>
            <select id="modalSel" name="modalSel">
                <option value="">Selecione</option>
            </select>
        </div>

if( $Conexão ) {

$SQLPAIS = " SELECT PAIS";
}
}   

while($municipio =sqlsrv_fetch_array($rsFilial, SQLSRV_FETCH_ASSOC)) {  
    echo utf8_encode("'". $municipio['CIDADE'] ."':{");



        $SQLCIDADE = "SELECT ESTADO";


            $rsarea2 = sqlsrv_query( $Conexão, $SQLCIDADE );

    while($narea =sqlsrv_fetch_array($rsarea2, SQLSRV_FETCH_ASSOC)){
    echo utf8_encode("'". $narea['NOMECURSO'] ."':[");


                $SQLCIDADE = "SELECT CIDADE";





            $rsarea3 = sqlsrv_query( $Conexão, $SQLCIDADE );


            while($ncurso =sqlsrv_fetch_array($rsarea3, SQLSRV_FETCH_ASSOC)){
                  echo utf8_encode("'". $ncurso['NOMEGRADE'] ."'");

    $SQLBAIRRO = "SELECT BAIRRO";





            $rsarea4 = sqlsrv_query( $Conexão, $SQLBAIRRO );
            $passa = array();
            while($nmodalidade =sqlsrv_fetch_array($rsarea4, SQLSRV_FETCH_ASSOC)){
                    $passa[] = ("'". utf8_encode($nmodalidade['NOMEMODALIDADE'] ."'"));
            }
        }
    echo (",");
    echo implode( ',', $passa );

    echo ("],");


    }
    echo("},");

    }

window.onload = function () {
    var stateSel = document.getElementById("stateSel"),
        countySel = document.getElementById("countySel"),
        citySel = document.getElementById("citySel");
        modalSel = document.getElementById("modalSel");

   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
        modalSel.length = 1; // remove all options bar first
        if (this.selectedIndex < 1) {
          countySel.options[0].text = "Selecione"
          citySel.options[0].text = "Selecione"
          modalSel.options[0].text = "Selecione"
          return; // done   
        }  
        countySel.options[0].text = "Selecione" // COMEÇA

        for (var county in stateObject[this.value]) {
            countySel.options[countySel.options.length] = new Option(county, county);
        }
        if (countySel.options.length==2) {
          countySel.selectedIndex=1;
          countySel.onchange();
        }  

    }
   //stateSel.onchange(); // reset in case page is reloaded



    countySel.onchange = function () {
        citySel.length = 1; // remove all options bar first
        modalSel.length = 1; // remove all options bar first
        if (this.selectedIndex < 1) {
          citySel.options[0].text = "Selecione"
          modalSel.options[0].text = "Selecione"
          return; // done   
        }  
        citySel.options[0].text = "Selecione" // COMEÇA
        for (var cities in stateObject[this.value]) {
            citySel.options[citySel.options.length] = new Option(cities, cities);
        }
        if (citySel.options.length==2) {
          citySel.selectedIndex=1;
          citySel.onchange();
        }  

    }
    citySel.onchange(); // reset in case page is reloaded




    citySel.onchange = function () {
        modalSel.length = 1; // remove all options bar first
        if (this.selectedIndex < 1) {
            modalSel.options[0].text = "Selecione"
          return; // done   
        }  
        modalSel.options[0].text = "Selecione"

        var modal = stateObject[stateSel.value][this.value];
        for (var i = 0; i < modal.length; i++) {
            modalSel.options[modalSel.options.length] = new Option(modal[i], modal[i]);
        }
        if (modalSel.options.length==2) {
          modalSel.selectedIndex=1;
          modalSel.onchange();
        }  

    }
    modalSel.onchange(); // reset in case page is reloaded


}