Ayuda con Combobox dependientes jQuery

[ZeThito]

He seguido de un Tutorial para crear combobox dependientes de 2 niveles.

Tutorial: [URL="http://www.miguelmanchego.com/2009/combos-dependientes-ajax-base-de-datos/"]http://www.miguelmanchego.com/2009/combos-dependientes-ajax-base-de-datos/[/URL]

Ejemplo tablas en MySQL : Ciudades y Comunas.

Todo funciona OK!

Pero no he logrado agregar dos cosas que necesito.

La primera es que al momento de seleccionar por ejemplo una Ciudad que tenga dependientes, el Combobox de Comunas aparesca.

La segunda es que al momento de selecciona una Ciudad que no tenga dependientes, el Combobox de Comunas desaparesca.


Les dejo mi codigo, haber si me logran echar una manito :)

Código Javascript:

<script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<!-- Combobox Dependientes -->
<script language="javascript">
//Inicializamos jQuery
$(document).ready(function(){
    // Parametros para e combo1
   $("#combo1").change(function () {
        $("#combo1 option:selected").each(function () {
            //alert($(this).val());
                elegido=$(this).val();
                $.post("combo1.php", { elegido: elegido }, function(data){
                $("#combo2").html(data);
            });         
        });
   })
 
});
</script>
 

Código PHP:

<?php
include("../conectar/config.inc.php");
include("../conectar/mysql.class.php");
$db = new MySQL();  
$db->open();
$consulta = $db->consulta("SELECT * FROM comuna WHERE ciudad_id LIKE '$_POST[elegido]'");
if ($row = $db->fetch_array($consulta)) {
        
    do {
        
        echo '<option value="'.$row['comuna_id'].'">'.$row['comuna_nombre'].'</option>';
    }while($row = $db->fetch_array($consulta));
}
?>
 

Código PHP:

<?php
include("../conectar/config.inc.php");
include("../conectar/mysql.class.php");
?>
 
<div class="clearfix">
<label>Ciudad</label>
<select name="combo1" id="combo1">
<option value="0">Seleccione Ciudad</option>
 
<?php
$db = new MySQL();  
$db->open();
$consulta = $db->consulta("SELECT * FROM ciudad");
if ($row = $db->fetch_array($consulta)) {
    do {
        echo 
        '<option value="'.$row[ciudad_id].'">'.$row[ciudad_nombre].'</option>';
    }while($row = $db->fetch_array($consulta));
}
?> 
</select>
</div>
 

[ZeThito]

Bueno logré lo que queria, modificando el codigo jQuery:

Con fadeIn(); y fadeOut();

Código Javascript:

<script language="javascript">
//Inicializamos jQuery
$(document).ready(function(){
    // Parametros para e combo1
   $("#combo1").change(function () {
        $("#combo1 option:selected").each(function () {
            //alert($(this).val());
                elegido=$(this).val();
                if(elegido == 1){ // 1 es igual a Ciudad Santiago.
                    $.post("combo1.php", { elegido: elegido }, function(data){
                    $("#combo2").html(data),
                    $("#comuna").fadeIn();
                });
                }else{
                    $.post("combo1.php", { elegido: elegido }, function(data){
                    $("#combo2").html(data),
                    $("#comuna").fadeOut();
                });                     
                }
        });
   })
});
</script>
 

Ahora intenaré que al momento de seleccionar la Ciudad de Santiago y luego seleccionar otra Ciudad. La comuna restablesca su valor a 0

[ZeThito]

Ayuda!! , no logro hacer un reset a los SELECT !!.

Tengo este código al parecer funciona, pero mis SELECT se quedan donde mismo.

Código Javascript:

<script type="text/javascript">
function reset()
{
var selects = document.forms["form"].getElementsByTagName("SELECT");
for (var i=0; i<selects.length; i++){
selects.item(i).selectedIndex = 0;
}
}
</script>
 

Código HTML:

<button onclick="reset()" class="button button-gray" type="reset">Restablecer</button>
 

[gmkas]

Que tal, espero no sea demasiado tarde para aportar, la respuesta la puedes encontrar en esta página, esta bien explicadito y cumple con lo que requieres.

http://www.apuralemijo.com/2011/04/11/uso-de-selects-dependientes-con-jquery-php/


Si lo que necesitas es que aparezca y desaparezca el combo dependiente, unicamente tienes que mostrarlo en un div en lugar del select, es decir:

Código Javascript:

$.post("combo1.php", { elegido: elegido }, function(data){
$("#id de tu div").html(data)
 

Y en el archivo combo1.php imprimes el select completo con sus respectivas opciones

=)

Espero les sirva.. saludos!!!!!