0

Tengo una página con dos select. Uno debe depender del valor que tiene el otro. Es decir, que dependiendo del primero que es la marca, me mostrará en el segundo los modelos de dicha marca. El código lo tengo así:

Primer select:

<label for="marca"> Marca: </label>
<select class="form-control selectpicker" name="filtro_marca" id="filtro_marca" onchange="FiltroModelo()">
<?php
foreach($record as $marca){ ?>
<option><?php echo $marca->descripcion ?></option>
<?php
} ?>
</select>"

Segundo select:

<label for="Modelo">Modelo:</label>
<select class="form-control selectpicker" name="Modelo" id="Modelo">
<?php
    $marca_seleccionada = $_POST["filtro_marca"];
    $query_sql = $base_de_datos->query("SELECT DISTINCT Model FROM Models WHERE marca = '$marca_seleccionada'");
    $result = $query_sql->fetchAll(PDO::FETCH_OBJ);                     
    foreach($result as $Model){ ?>
    <option><?php echo $Model->Model ?></option>
<?php } ?>
</select>

Por último tengo un script que almacena y devuelve el valor seleccionado (para comunicar js con php):

function FiltraModelo(){
    var filtro_marca = document.getElementById("filtro_marca").value;
    filtro_marca = marca;
}

En el evento OnChange del select filtro_marca llamo a FiltroModelo() para que seleccione la marca y actualice la consulta del select filtro_modelo pero no me funciona.

He probado con un $_POST["filtro_marca"] pero no va. Lo que necesito es recibir el valor seleccionado para terminar de componer la consulta.


Contenido del fichero principal.php:

<html>
<body>
<label>Marca:</label>
<select class="form-control" name="marca" id="marca" required>
    <option value="">SELECCIONE MARCA</option>
    <?php
        $query = "SELECT nombre_marca FROM marcas";
        $result = $con->query($query);
        if ($result->num_rows > 0) {
            while ($row = $result->fetch_assoc()) {
                echo '<option value="'.$row['nombre_marca'].'">'.$row['nombre_marca'].'</option>';
        }
        }
        else{
            echo '<option value="">No se ha encontrado la marca</option>';
        }
    ?>
</select>
<label>Modelo: </label>
<select class="form-control" name="modelo" id="modelo">
    <option value="">SELECCIONE MODELO</option>
</select>
</body>        
<script>
    $(document).ready(function(){
    $("#marca").on("change",function(){
    var marca = $(this).val();
    $.ajax({
        url :"action_vincula.php",
        type:"POST",
        cache:false,
        data:{marca:marca},
        success:function(data){
           $("#modelo").html(data);         
        }
    });
});
</script>
</html>

Contenido del fichero action_vincula.php:

<?php
if (isset($_POST['marca']) && !empty($_POST['marca'])) {
    echo '<script>alert('.$_POST['marca'].')</script>';
    $query = "SELECT DISTINCT(modelo) FROM modelos WHERE marca LIKE  '".$_POST['marca']."'";
    $result = $con->query($query); 
    if ($result->num_rows > 0) {
        echo '<option value="">SELECCIONE MODELO</option>';
        while ($row = $result->fetch_assoc()) {
            echo '<option value="'.$row['modelo'].'">'.$row['modelo'].'</option>';
        }
    } 
    else {
        echo '<option value="">No se ha encontrado el modelo</option>';
    }
} 
?>
5
  • ¿Qué hace tu código actualmente? Este tipo de cosas conviene hacerlas con Ajax o con la nueva API Fetch de Javascript.
    – A. Cedano
    el 23 ene. 2022 a las 20:35
  • Buenas, ahora mismo el segundo select no se actualiza al cambiar el valor en el primero. Lo que quiero es que $marca_seleccionada coja el valor de filtro_marca (que lo selecciona bien en js). Es decir, que haya comunicación entre php y js. He probado componiendo la consulta en js y enviándosela a php, pero tampoco. Si le pongo un valor directamente, es decir: $marca_seleccionada = 'CAJA'; funciona. Pero esa no es la idea. He intentado hacerlo con Ajax pero no sé como se hace.
    – Luis A
    el 24 ene. 2022 a las 8:04
  • Es decir, que haya comunicación entre php y js. Pues la forma de lograr eso es con Ajax o con la nueva API Fetch de Javascript. Te recomiendo que investigues sobre cómo hacerlo de ese modo y si bloqueas en algo te ayudaremos. Sin Ajax o Fetch no podrás hacer select dependientes que es lo que necesitas aquí, mientras que con esas herramientas es sumamente fácil hacerlo y de paso aprendes a usar algo que te va a ser muy útil en un futuro. Entender cómo funciona Ajax o Fetch es cuestión de un día, vale la pena.
    – A. Cedano
    el 24 ene. 2022 a las 16:08
  • Gracias, estoy en ello... muy amable!
    – Luis A
    el 26 ene. 2022 a las 11:50
  • He encontrado un excelente ejemplo, en este enlace, cluemediator.com/… efectivamente utilizando Ajax y jQuery.
    – Luis A
    el 27 ene. 2022 a las 12:19

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.