[SOLUCIONADO] Lista Desplegable con valores condicionados en un select inicial

[milotower]

Buenas a todos.

He intentado buscarlo pero no encuentro nada al respecto que me ayude.

Voy a intentar explicarlo.

La idea es tener un primer select, (o lista desplegable) con datos obtenidos de una base de datos mediante PHP. Los datos de este primer desplegable podrían ser por ejemplo:

- Coches
- Motos
- Barcos
- Bicicletas

Habría un segundo desplegable, cuyos datos se obtendrían también mediante consulta mysql con PHP pero estos condicionados a lo que se ha solicitado en el primer desplegable.

Si se ha seleccionado coches, deberían aparecer por ejemplo marcas de coches, si se ha seleccionado bicicletas, marcas de bicicletas.

Lo que me falta en resumen y con lo que llevo varios días es ese trocito de código javascript que me ayude a llamar al PHP de la segunda consulta y rellenar el segundo select.

¿Alguien puede ayudarme? Estoy bastante desesperado. Si fuese necesario pego un ejemplo de código.

Muchas gracias a todos.

[Alexis88]

No es tan difícil como crees. Cuando elijas una opción del primer combo, se produce el evento change, el cual puedes controlarlo con el método change de jQuery. Luego, cada vez que elijas un valor distinto en el combo, utiliza el método ajax de jQuery para envíar una petición asíncrona (Ajax) hacia un archivo que en el lado del servidor buscará las marcas que correspondan con el elemento seleccionado. En dicho archivo, además de buscar las marcas, cargarás a un segundo combo con dichos datos, el cual representará a la respuesta del servidor en la petición asíncrona. Luego, en el primer archivo, solamente te quedaría dicha respuesta al contenido de una capa que debes crear previamente y colocarla ya sea abajo o al costado del primer combo.

Primer archivo

Código HTML:

<select id = "vehiculos" name = "vehiculos">
    <option value = "Ninguno">Seleccione un valor</option>
    <option value = "Autos">Autos</option>
    <option value = "Bicicletas">Bicicletas</option>
    <option value = "Barcos">Barcos</option>
    <option value = "Motocicletas">Motocicletas</option>
</select>
<div id = "respuesta"></div>
 

Código Javascript:

$("#vehiculos").change(function(){
    if ($(this).val() != "Ninguno"){
        $.ajax({
            url: "segundo_archivo.php",
            type: "GET",
            data: {
                opcion: $(this).val()
            }
        }).done(function(response){
            $("#respuesta").html(response);
        }).fail(function(jqXHR, textStatus){
            $("#respuesta").html("Ha ocurrido un error: " + textStatus);
        });
    }
});
 

Segundo archivo

Código PHP:

<?php
$opcion = mysqli_real_escape_string(strip_tags($_GET["opcion"]));
$query = mysqli_query($conexion, "SELECT * FROM marcas WHERE vehiculo = $opcion");
if (mysqli_num_rows($query)){
?>
    <select id = "marcas" name = "marcas">
<?php
    while ($row = mysqli_fetch_array($query)){
?>
        <option value = <?=$row["id_marca"]?> <?=$row["marca"]?> </option>
<?php        
    }
    mysqli_free_result($query);
?>
    </select>
<?php
}
?>
 

También es posible hacerlo con código JavaScript nativo.

Código Javascript:

var vehiculos = document.getElementById("vehiculos");
 
vehiculos.addEventListener("change", function(){
    if (this.value != "Ninguno"){
        var ajax = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP") || new ActiveXObject("Msxml2.XMLHTTP"),
            respuesta = document.getElementById("respuesta");
 
        ajax.open("GET", "segundo_archivo.php?opcion=" + this.value, true);
        ajax.onreadystatechange = function(){
            if (ajax.readyState == 4){
                switch (ajax.status){
                    case 200:
                        respuesta.innerHTML = ajax.responseText;
                    break;
 
                    case 404:
                        respuesta.innerHTML = "La dirección brindada no existe";
                    break;
 
                    default:
                        respuesta.innerHTML = "Error: " + ajax.status;
                    break;
                }
            }
        };    
 
        ajax.send();
    }
}, false);
 

Saludos

[milotower]

En primer lugar muchas gracias por contestar. Creo que voy por buen camino, pero aún no me funciona. El código resultante es el siguiente:

Código PHP:

  <?php header('Content-type: text/html; charset=utf-8');
 
 
                        $con=mysql_connect("localhost","root","");
                        mysql_select_db("base",$con);
                        $consulta="select * from plagas";
                        $datos=mysql_query($consulta,$con);
                        $array=mysql_fetch_array($datos);
                        echo "<form action='' method='post'>
                        <select id = 'plagas' name = 'plagas'>";
                        echo "<option value='Ninguno'>Selecciona un opcion...</option>";
                        do{
                            $plaga=$array['plaga'];
                            echo "<option value='$plaga'>$plaga</option>";
                        } while ($array=mysql_fetch_array($datos));
                        mysql_close($con);
                        
                        
?>                        
            
            <div id="respuesta"></div>
            
            </form>
            <script type="text/javascript" src="/js/jquery.js"></script>
            <script>            
                $("#plagas").change(function(){
                    if ($(this).val() != "Ninguno"){
                        $.ajax({
                            url: "/segundo_archivo.php",
                            type: "GET",
                            data: {
                                opcion: $(this).val()
                            }
                        }).done(function(response){
                            $("#respuesta").html(response);
                        }).fail(function(jqXHR, textStatus){
                            $("#respuesta").html("Ha ocurrido un error: " + textStatus);
                        });
                    }
                });
 
                </script>  

Y el segundo archivo PHP:

Código PHP:

  <?php header('Content-type: text/html; charset=utf-8');
 
 
                        $con=mysqli_connect("localhost","root","");
                        mysqli_select_db("base",$con);
                        
                        $opcion = mysqli_real_escape_string(strip_tags($_GET["opcion"]));
                        $query = mysqli_query($con, "SELECT * FROM productos WHERE plaga = '$opcion'");
                        if (mysqli_num_rows($query)){
?>
 
 
    <select id = "productos" name = "productos">
<?php
    while ($row = mysqli_fetch_array($query)){
?>
        <option value = <?=$row["producto"]?> <?=$row["producto"]?> </option>
<?php        
    }
    mysqli_free_result($query);
?>
    </select>
<?php
}
?>   

Cuando lo ejecuto sólo me aparece la primera lista pero no la segunda. No sé si la libreria que estoy usando sería la correcta:

Código HTML:

<script type="text/javascript" src="/js/jquery.js"></script> 

O bien es que el div de la segunda lista debe de ir entre otras etiquetas.

Código HTML:

<select id = "productos" name = "productos"> 

He probado varias cosas pero sin suerte, en cualquier caso, si me pudierais echar una mano en detectar el fallo lo agradecería mucho.

Saludos.

[Alexis88]

¿Estás seguro de que el archivo que hace la búsqueda del dato seleccionado se llama segundo_archivo.php?, ten en cuenta que es un nombre que puse como ejemplo; si no es el nombre del archivo, debes poner el que corresponda. En cuanto a la librería, si tienes dudas, en su lugar usar este enlace como referencia: http://code.jquery.com/jquery-2.1.0.min.js

Por cierto, te falta cerrar el primer <select>. Por otro lado, también tienes la opción de probar el método Ajax implementado en código nativo de JavaScript, con ese no es necesario que tengas la librería jQuery. No olvides colocar el código JavaScript justo antes de la etiqueta </body>, pero si lo vas a colocar en la cabecera del documento, asegúrate de que el DOM haya cargado completamente.

Código Javascript:

$(document).ready(function(){
    //Código
});
 

Saludos

[milotower]

He conseguido al final hacerlo funcionar. El error probablemente estaría en el segundo archivo.

He cambiado esto:

Código PHP:

 <option value = <?=$row["producto"]?> <?=$row["producto"]?> </option>  

por esto otro:

Código PHP:

  while ($row = mysql_fetch_array($query)){
 
                           $producto = $row["producto"];
                        echo'<option value = "$producto">'.$producto.'</option>';
       
                } 
   

Y ya funciona perfectamente.

Muchas gracias por toda la ayuda. Espero poder colaborar más en el foro a partir de ahora, ya que muchas dudas se me han resuelto sin necesidad de registrarme, ahora que estoy registrado intentaré ayudar yo también.

[eanamhe]

tengo un problema parecido . Mi codigo :
<FORM NAME="top_form" METHOD="POST" ACTION="php/tframe.php">
<TABLE COLS="4" style="text-align:center;width:20em;font-size:1.2em;margin-top:10px;margin-bottom:0">
<TR>
<TD COLSPAN="4" style="padding:5px 0px">
<b>Seleccione un item de la lista:</b><br>
<SELECT ID="item" NAME="item" style="width:100%" ONCHANGE='parent.BOTTOM.location="bframe.php";docu ment.top_form.submit()'>
<? function load_items() {
global $items1, $items2, $items3, $items4;

$selected=0;

foreach (array_merge($items1, $items2, $items3, $items4) as $item) {
print '<option value="'.$codes[$item].'"';
if (!$selected and $_REQUEST['item']==$codes[$item]) {
print " selected";
$selected=1;
}
print ">$item</option>\n";
}
} ?>
</SELECT>
</TD>
</TR>
<?
# Código con los botones a mostrar dependiendo del item seleccionado
load_buttons();
?>
</TABLE>


No consigo ver el contenido en el desplegable