Combos dependientes.

[Karen_mBrK]

Buenas tardes amigos.

Estoy intentando crear combos dependientes en mysql y php, si, ya sé, lo ideal es hacerlo también con ajax, pero en este caso lo necesito con solo esos 2: PHP y MySQL.

Tengo 2 tablas, una se llama Categorias, el cual contiene los campos: id_cat y categoria, y tengo una segunda tabla: Subcategorias, con los campos id_sub y subcategorias.

Hasta ahora he logrado que el primer combo si me cargue lo de la tabla categorias, pero al seleccionar la opción que necesito, el segundo combo no carga.

Aquí mi código:

Código PHP:

  <?php require_once('Connections/HD.php'); ?> 
<?php 
$re = mysql_query("select * from categorias"); 
if(isset ($_POST['categoria'])){ 
$categoria = $_POST['categoria']; 
$re1 = mysql_query ("select * from Subcategorias where id_sub=".$categoria.""); 
$re2 = mysql_query ("select categoria from categorias where id_cat=".$categoria.""); 
$j = mysql_fetch_array($re2); 
}else{ 
    @$j[categoria] = 'Seleccione una categoria'; } 
    ?>  
     
<form id="form1" name="form1" method="post" action=""> 
<select name="categoria" size="1" id="categoria" onChange="form1.submit()" style="width:200px"> 
<option value="0" selected="selected"><?php echo @$j[categoria]; ?> </option> 
<?php  
while ($f = mysql_fetch_array($re)){ 
    echo '<option value='.$f[id_cat].'>'.$f[categoria].'</option>'; 
} 
?> 
</select> 
<br> 
<select name="subcategoria" size="1" id="subcategoria" style="width:200px">  

Espero que puedan ayudarme, gracias. :)

[ocp001a]

Supongo que te falta mostrar la parte del código donde llenas el segundo select con lo obtenido en $re1

Deberías imprimir la consulta que haces a las subcategorías para ver si la haces bien.

Por otra parte, no veo para qué volver a consultar la tabla categorias

Finalmente, como comentario, aquí:
echo '<option value='.$f[id_cat].'>

aunque seguramente usas id numérico, es buena práctica meter todo valor de los options en comillas, para evitar errores:
echo '<option value="'.$f[id_cat].'">

[Karen_mBrK]

Hola, no es que haya olvidado poner la última parte, es que no se bien como hacerle, ¿Cómo mandar a llamar a la subcategoria y llenar el combo?

Esa es mi duda. :(

[NSD]

Hay dos formas de hacerlo, la correcta (con ajax) y la rustica. Ambas 2 involucran javascript y los cambios entre ambos metodos son muy pocos, te muestro un ejemplo de la forma sin ajax, pero deberias considerar usarlo ya que no es dificil de implementar.

Código PHP:

<?php 
    require_once('Connections/HD.php');
    $categorias = mysql_query("select id_categoria, descripcion from categorias"); 
    $sub_categorias = mysql_query ("select id_categoria, id_sub_categoria, descripcion from subcategorias");
?>
    <form id="form1" name="form1" method="post"> 
        <select name="categoria" id="categoria"> 
            <option selected="selected">Seleccione una categoria</option>
            <?php  
                while($categoria = mysql_fetch_array($categorias))
                    echo "<option value=\"$categoria[id_categoria]\">$categoria[descripcion]</option>"; 
            ?> 
        </select> 
        <select name="subcategoria" id="subcategoria"> 
            <option selected="selected" data-categoria="0">Seleccione una sub-categoria</option> 
            <?php  
                while($sub_categoria = mysql_fetch_array($sub_categorias))
                    echo "<option value=\"$sub_categoria[id_sub_categoria]\" data-categoria=\"$sub_categoria[id_categoria]\">$sub_categoria[descripcion]</option>"; 
            ?> 
        </select>
    </form>
    <script>
        function updateSubCategorias()
        {
            var s_categorias = document.querySelectorAll("#subcategoria option");
            var categoria_actual = document.getElementById("categoria").value;
            
            for(var nro=0; nro < s_categorias.length; nro++)
            {
                var categoria = s_categorias[nro].getAttribute("data-categoria");
                if(categoria == 0 || categoria == categoria_actual)
                    s_categorias[nro].style.display = 'block';
                else 
                    s_categorias[nro].style.display = 'none';
            }
        }
        document.getElementById("categoria").addEventListener("change", updateSubCategorias);  
        updateSubCategorias();
    </script>
 

Si quieres implementar ajax, solo tienes que poner la peticion dentro de la funcion updateSubCategorias() y realizar minimos cambios.

[Karen_mBrK]

Gracias por intentar ayudarme NSD, intenté con tu código, claro que lo adapté a justo como lo necesitaba, sin embargo no me dio absolutamente ningún resultado. Así que después de tanto buscarle, decidí volver a mi código, y le hice algunos cambios, que según yo, deberían de funcionar, pero nuevamente no me carga el segundo select.

Aquí el código:

Código PHP:

  <?php 
$categoria = isset($_POST['categoria']) ? $_POST['categoria'] : NULL; 
$re = mysql_query("select categoria, id_cat from categorias"); 
$re1 = mysql_query ("select subcategoria from subcategorias inner join categorias ON id_sub = id_cat AND categoria = '$categoria'"); 
?>  
     
<form id="form1" name="form1" method="post" action=""> 
<select name="categoria" size="1" id="categoria" onChange="form1.submit()" style="width:200px"> 
<option value="0" selected="selected">Selecciona una categoria</option> 
<?php  
while ($f = mysql_fetch_array($re)){ 
    echo '<option value='.$f['id_cat'].'>'.$f['categoria'].'</option>'; 
} 
?> 
</select> 
<br> 
<select name="subcategoria" size="1" id="subcategoria" style="width:200px"> 
<?php  
if(isset($_GET['$re']))  
                {  
                     while ($g = mysql_fetch_array($re1)){ 
    echo '<option value='.$g['id_sub'].'>'.$g['subcategoria'].'</option>'; 
} 
                                        
                }else{}         
                ?> 
                </select> 
                </form>  

:(

[NSD]

Del codigo que te pase solo debes cambiar las consultas por los nombres de los campos que tienes, lo he probado y funciona correctamente.

Eventualmente podrias cambiar mysql_fetch_array por mysql_fetch_assoc para emprolijar un poco el codigo.

Que es lo que no te funciona? que error te arroja?

[Karen_mBrK]

No me da ningún error, pero tampoco me trae ningún resultado:

Código PHP:

     <?php  
   $categorias = mysql_query("select id_cat, categoria from categorias"); 
    $sub_categorias = mysql_query ("select id_sub, subcategoria from subcategorias"); 
?> 
    <form id="form1" name="form1" method="post">  
        <select name="categoria" id="categoria">  
            <option selected="selected">Seleccione una categoria</option> 
            <?php   
                while($categoria = mysql_fetch_array($categorias)) 
                echo "<option value=\"$categoria[id_cat]\">$categoria[categoria]</option>";  
            ?>  
        </select>  
        <select name="subcategoria" id="subcategoria">  
            <option selected="selected" data-categoria="0">Seleccione una sub-categoria</option>  
            <?php   
                while($sub_categoria = mysql_fetch_array($sub_categorias)) 
                    echo "<option value=\"$sub_categoria[id_sub]\" data-categoria=\"$sub_categoria[id_cat]\">$sub_categoria[subcategoria]</option>";  
            ?>  
        </select> 
    </form> 
    <script> 
        function updateSubCategorias() 
        { 
            var s_categorias = document.querySelectorAll("#subcategoria option"); 
            var categoria_actual = document.getElementById("categoria").value; 
             
            for(var nro=0; nro < s_categorias.length; nro++) 
            { 
                var categoria = s_categorias[nro].getAttribute("data-categoria"); 
                if(categoria == 0 || categoria == categoria_actual) 
                    s_categorias[nro].style.display = 'block'; 
                else  
                    s_categorias[nro].style.display = 'none'; 
            } 
        } 
        document.getElementById("categoria").addEventListener("change", updateSubCategorias);   
        updateSubCategorias(); 
    </script>  

[NSD]

Mi consulta:

Código PHP:

$sub_categorias = mysql_query ("select id_categoria, id_sub_categoria, descripcion from subcategorias");
 

Tu consulta:

Código PHP:

$sub_categorias = mysql_query ("select id_sub, subcategoria from subcategorias");
 

¿No te parece que falta un campo?

[Karen_mBrK]

Hmm, tanto como faltar, no. Solo que no me parece necesario... En fin, por fin logré que medio cargara, con el código que recién te mostré, pero el problema está que en "Subcategorias" me trae todo, todo, desde el principio, no se espera a que yo seleccione para filtrar.

Así que declaré una variable para que los filtre, pero a la hora de seleccionar la categoria, no me trae nada, me imagino que le falta algún onChange, pero no puedo lograr que se mantenga la selección:

Código PHP:

  <?php 

   $cat = isset($_POST['id_cat']) ? $_POST['id_cat'] : NULL;
   $categorias = mysql_query("select id_cat, categoria from categorias");
   $sub_categorias = mysql_query ("select id_sub, subcategoria from subcategorias WHERE  id_sub =".$cat."");
?>
<form id="form1" name="form1" method="post" action="">
<select name="categoria" size="1" id="categoria" style="width:200px">
<option value="0" selected="selected">Seleccione una categoria </option>
            <?php  
                while($categoria = mysql_fetch_array($categorias))
                echo "<option value=\"$categoria[id_cat]\">$categoria[categoria]</option>"; 
            ?> 
        </select> 
        <select name="subcategoria" id="subcategoria"> 
            <option selected="selected" data-categoria="0">Seleccione una sub-categoria</option> 
            <?php  
                while($sub_categoria = mysql_fetch_array($sub_categorias))
                    echo "<option value=\"$sub_categoria[id_sub]\" data-categoria=\"$sub_categoria[id_cat]\">$sub_categoria[subcategoria]</option>"; 
            ?> 
        </select>
    </form>  

[NSD]

Hmm, tanto como faltar, no. Solo que no me parece necesario...

Te falta y no es necesario, es INDISPENSABLE...

¿Como es la estructura de tus tablas? ¿Como estas relacionando las subcategorias con la categoria?

[Karen_mBrK]

Mi tabla categorías tiene 2 campos: id_cat y Categoria.

Y Subcategorias tiene 3: id_cat, id_sub y Subcategorias.

Se relacionan con id_cat, en "Categorias" solo tengo 4 registros. ( con id_cat de:1,2,3,4) y en Subcategorias el campo llamado "id_cat" los que tienen el 1, corresponden a mi categoria 1, el 2 la cat 2, etc.

Pero al hacerlo como sugieres, te comento (nuevamente) que no me respeta el filtrado ni la selección del primer select.

[NSD]

Iniciado por Karen_mBrK

Pero al hacerlo como sugieres, te comento (nuevamente) que no me respeta el filtrado ni la selección del primer select.

Si no seleccionas como te sugeri los 3 campos, no te va a funcionar.

Código PHP:

<?php
    require_once('Connections/HD.php');
    $categorias = mysql_query("select id_cat id_categoria, categoria descripcion from categorias");
    $sub_categorias = mysql_query ("select id_cat id_categoria, id_sub id_sub_categoria, subcategoria descripcion from subcategorias");
?>
    <form id="form1" name="form1" method="post">
        <select name="categoria" id="categoria">
            <option selected="selected">Seleccione una categoria</option>
            <?php  
                while($categoria = mysql_fetch_array($categorias))
                    echo "<option value=\"$categoria[id_categoria]\">$categoria[descripcion]</option>";
            ?>
        </select>
        <select name="subcategoria" id="subcategoria">
            <option selected="selected" data-categoria="0">Seleccione una sub-categoria</option>
            <?php  
                while($sub_categoria = mysql_fetch_array($sub_categorias))
                    echo "<option value=\"$sub_categoria[id_sub_categoria]\" data-categoria=\"$sub_categoria[id_categoria]\">$sub_categoria[descripcion]</option>";
            ?>
        </select>
    </form>
    <script>
        function updateSubCategorias()
        {
            var s_categorias = document.querySelectorAll("#subcategoria option");
            var categoria_actual = document.getElementById("categoria").value;
           
            for(var nro=0; nro < s_categorias.length; nro++)
            {
                var categoria = s_categorias[nro].getAttribute("data-categoria");
                if(categoria == 0 || categoria == categoria_actual)
                    s_categorias[nro].style.display = 'block';
                else
                    s_categorias[nro].style.display = 'none';
            }
        }
        document.getElementById("categoria").addEventListener("change", updateSubCategorias);  
        updateSubCategorias();
    </script>
 

[Karen_mBrK]

¡Tenías razón! Lo único que faltaba era contemplar ese campo, me siento un poco mal el haber perdido tanto tiempo peleándome con ese código, pero en fin.

Tengo otra duda, espero y puedas ayudarme o al menos darme tu punto de vista, una vez que he (gracias a ti) logrado que me traiga datos de mi base, y me permite seleccionar una opción, ahora necesito filtrar datos y mostrarlos en una tabla dinámica, es decir, ademas de las tablas: categorías y subcategorías, tengo otras 4 llamadas:
1)Autos
2)Herramientas
3)Viáticos
4)Sistemas
Entonces, cuando alguien seleccione la categoria "Auto" y en subcategoria seleccione "Multas" un select me deberá traer todos los registros de la tabla "Auto" que en el campo llamado "Tipo de problema" diga "Multas", me queda claro que se debe hacer con condicionantes, pero la cosa es que en este caso, lo quiero hacer con un switch, ¿Qué variables serán capaces de recoger lo que se ha seleccionado en ambos combos? (Respecto al código en el que hemos estado trabajando)

Espero que me haya dado a entender, y me puedas/n ayudar. :) Gracias.

[Karen_mBrK]

Respecto a mi duda anterior, sigo sin poder resolverla:
Si quisiera, seleccionar todos aquellos "tipos de problema" que fueron seleccionados en las subcategorias, ¿Cómo seria? Tomando en cuenta lo siguiente:

En el segundo combo, tengo subcategorias, que son extraídas de mi bd, y a su vez, necesito que busque en otra tabla para traerme lo que necesito:

Código PHP:

  //declaro una variable, 'subcategoria' hace referencia al nombre que se le asignó a el select
$buscar4 = isset($_POST['subcategoria']) ? $_POST['subcategoria'] : NULL; 


$query_autos = "SELECT * FROM autos WHERE Tipo_Prob = '$buscar4'";  
   

El select que se utiliza:

Código PHP:

  
<?php
    $categorias = mysql_query("select id_cat, categoria from categorias");
    $sub_categorias = mysql_query ("select id_cat, id_sub, subcategoria from subcategorias");
?>
    <form id="form1" name="form1" method="post">

//Categorias
        <select name="categoria" id="categoria">
            <option selected="selected">Seleccione una categoria</option>
            <?php  
                while($categoria = mysql_fetch_array($categorias))
                    echo "<option value=\"$categoria[id_cat]\">$categoria[categoria]</option>";
            ?>
        </select>

//Subcategorias
        <select name="subcategoria" id="subcategoria" size="10">
            <option selected="selected" data-categoria="0">Seleccione una sub-categoria</option>
            <?php  
                while($sub_categoria = mysql_fetch_array($sub_categorias))
                    echo "<option value=\"$sub_categoria[id_sub]\" data-categoria=\"$sub_categoria[id_cat]\">$sub_categoria[subcategoria]</option>";
            ?>
        </select>  

Espero que alguien pueda ayudarme Ya que no consigo que me traiga ningún resultado. :(

[NSD]

tu problema es que no quieres usar ajax, y lo que quieres hacer se hace mucho mas simple con ajax que por cualquier otra via