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

Question

Next I have a question where I have 3 drop down list and when selecting 1 dropdown it releases the other one , it is connecting with my bank and brings the result of my select via while and shows in my drop down list , the tricky thing is I have to add 1 more dropdown list and I’m not getting it.

Example: Select PARENTS > STATE > CITY > NEIGHBORHOOD

follows 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


}

Answer 1

You can leave all selects hidden by default (they are already loaded on the page with the backend), so in Javascript, with the Jquery library you can pull a check

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$('.col-md-3').change(function(){
    if($(this).val() != '0')//!= '0' || != ''
        $('.col-md-4').css('display', 'table');
    //$('.col-md-4').addClass('dt');
    //onde .dt recebe no css display: table;
});
$('.col-md-4').change(function(){
    if($(this).val() != '0')//!= '0' || != ''
        $('.col-md-5').css('display', 'table');
    //$('.col-md-5').addClass('dt');
});
$('.col-md-5').change(function(){
    if($(this).val() != '0')//!= '0' || != ''
        $('.col-md-6').css('display', 'table');
    //$('.col-md-6').addClass('dt');
});

And so for each of the events you want to include.