0

3 level dependent selects not working

I am trying to make a dynamic select Departamento->Municipio->Ciudad. With this code, only 2 selects work fine, the information arrives from the database. The problem is when I want to add a select from the second, it no longer works there. It is as if they did not load the data to be sent by Ajax from the second select, so absolutely nothing appears in the third.

I have checked several times and looked for other alternatives, but it still does not work, and I do not know what is wrong.

I share the code of what I have.

Thanks for the help

ajaxData

<?php 

include_once 'dbConfig.php'; 
 
if(!empty($_POST["departamento_id"])){ 
    
    $query = "SELECT * FROM municipios WHERE departamento_id = ".$_POST['departamento_id']; 
    $result = $db->query($query); 
     
   
    if($result->num_rows > 0){ 
        echo '<option value="">Seleccione Departamento</option>'; 
        while($row = $result->fetch_assoc()){  
            echo '<option value="'.$row['municipio_id'].'">'.$row['municipio'].'</option>'; 
        } 
    }else{ 
        echo '<option value="">Departamento no disponible</option>'; 
    } 
}elseif(!empty($_POST["municipio_id"])){ 
    
    $query = "SELECT * FROM localidades WHERE municipio_id = ".$_POST['municipio_id']; 
    $result = $db->query($query); 
     
    
    if($result->num_rows > 0){ 
        echo '<option value="">Seleccione Municipio</option>'; 
        while($row = $result->fetch_assoc()){  
            echo '<option value="'.$row['id_localidad'].'">'.$row['nombre_localidad'].'</option>'; 
        } 
    }else{ 
        echo '<option value="">Localidad no disponible</option>'; 
    } 
} 
?>

index

   <?php         
    include_once 'dbConfig.php';                  
    $query = "SELECT * FROM departamentos"; 
    $result = $db->query($query); 
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('#departamento').on('change', function dep(){
        var departamentoID = $(this).val();
        if(departamentoID){
            $.ajax({
                type:'POST',
                url:'ajaxData.php',
                data:'departamento_id='+departamentoID,
                success:function(html){
                    $('#municipio').html(html);
                    $('#localidad').html('<option value="">Seleccione Departamento primero</option>'); 
                }
            }); 
        }else{
            $('#municipio').html('<option value="">Seleccione Departamento primero</option>');
            $('#localidad').html('<option value="">Seleccione Municipio primero</option>'); 
        }
    });
    
    $('#municipio').on('change', function loc(){
        var localidadID = $(this).val();
        if(localidadID){
            $.ajax({
                type:'POST',
                url:'ajaxData.php',
                data:'municipio_id='+localidadID,
                success:function(html){
                    $('#localidad').html(html);
                }
            }); 
        }else{
            $('localidad').html('<option value="">Seleccione municipio primero</option>'); 
        }
    });
});
</script>    
<!-- Departamento dropdown -->
<select id="departamento">
    <option value="">Seleccione Departamento</option>
    <?php 
    if($result->num_rows > 0){ 
        while($row = $result->fetch_assoc()){  
            echo '<option value="'.$row['id_departamento'].'">'.$row['departamento'].'</option>'; 
        } 
    }else{ 
        echo '<option value="">Departamento no disponible</option>'; 
    } 
    ?>
</select>    
<!-- Municipio dropdown -->
<select id="municipio">
    <option value="">Seleccione Departamento primero</option>
</select>  
<!-- Localidad dropdown -->
<select id="localidad">
    <option value="">Seleccione Municipio primero</option>
</select>
María R
  • 11
  • 1
    Your script is vulnerable to [SQL Injection Attack](https://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php). Even if [you are escaping variables, its not safe](https://stackoverflow.com/questions/5741187/sql-injection-that-gets-around-mysql-real-escape-string%5D)! You should always use [prepared statements and parameterized queries](https://www.php.net/manual/en/mysqli.quickstart.prepared-statements.php) in either MYSQLI or PDO instead of concatenating variables into the query. – Barmar May 22 '23 at 16:08
  • 1
    Have you checked the Network tab to see what's being sent and received when you update the second select? – Barmar May 22 '23 at 16:11

0 Answers0