problema con select dependientes please ayudaaaaaaaaaaaa!!!!

jositosov · #1 (**permalink**) 10/06/2008, 03:17

hola amigos tengo un problema gordo...
tengo unos select dependientes el uno del otro... el tema esta en que cuando pongo el primer select me desaperece el segundo ni me da error ni nada os pongo los codigos

a) index

Código PHP:

  <?php 
    include 'conexion.php'; 
     
//****************************************************************************************************************************************************** 
//******************************************************************************************************************************************************* 
function generaMarcas() 
{ 
    conectar(); 
    $consulta=mysql_query("SELECT * FROM provincias ORDER BY provincia ASC"); 
    desconectar(); 
 
    // Voy imprimiendo el primer select compuesto por los paises 
    echo "<select name='provincia' id='provincia' onChange='cargaContenido(this.id)'>"; 
    echo "<option value='0'>Elige</option>"; 
    while($registro=mysql_fetch_row($consulta)) 
    { 
        echo "<option value='".$registro[0]."'>".$registro[1]."</option>"; 
    } 
    echo "</select>"; 
} 
?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Nuestros Vehículos en Exportec</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> 
<link href="css/estilo.css" rel="stylesheet" type="text/css" /> 
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script> 
<script type="text/javascript" src="js/prototype.js"></script> 
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script> 
<script type="text/javascript" src="js/lightbox.js"></script> 
<script type="text/javascript" src="select_dependientes.js"></script> 
<style type="text/css"> 
<!-- 
.Estilo1 { 
    color: #990000; 
    font-weight: bold; 
} 
#demoIzq, #demoDer { dashed; width:290px; background-color:transparent; text-align:center; } 
 
select { width:220px; } 
--> 
</style> 
</head> 
 
<body> 
<table width="918" border="0" align="center" cellpadding="0" cellspacing="0" id="contenedor"> 
  <tr> 
    <td width="9" align="center" valign="middle" background="images/sombraizquierda.jpg">&nbsp;</td> 
    <td width="900" align="center" valign="middle"><table width="900" border="0" align="center" cellpadding="0" cellspacing="0"> 
      <tr> 
        <td align="center" valign="top">&nbsp;</td> 
      </tr> 
    </table> 
      <table width="900" border="0" align="center" cellpadding="0" cellspacing="0"> 
        <tr> 
          <td align="center" valign="middle"> 
<FORM METHOD="GET" ACTION="buscador.php"> 
  <p>Seleccione aqui la marca o el modelo de vehiculo que desa buscar</p> 
  <table width="100" border="0"> 
    <tr> 
      <td width="53%"><div align="center">Marca</div></td> 
      <td width="47%"><div align="center"> 
        <input name="accion" type="hidden" id="accion" value="search" /> 
        <? 
      generaMarcas(); 
   ?> 
      </div></td> 
    </tr> 
    <tr> 
      <td><div align="center">Modelo</div></td> 
      <td><div class="clearfix" id="demoDer"> 
                    <div align="center"> 
                      <select disabled="disabled" name="oficina" id="oficina"> 
                        <option value="0">Selecciona opci&oacute;n...</option> 
                        </select> 
                          </div> 
      </div></td> 
    </tr> 
  </table> 
  <p>&nbsp;</p> 
  <label> 
<input type="submit" name="button" id="button" value="Enviar" /> 
</label> 
</FORM>  
          </td> 
        </tr> 
      </table> 
      <table width="900" border="0" align="center" cellpadding="0" cellspacing="0"> 
        <tr> 
          <td align="center" valign="middle"> 
          <table width="890" border="0" align="center" cellpadding="0" cellspacing="0"> 
            <tr> 
              <td align="left" valign="top">&nbsp;</td> 
            </tr> 
          </table> 
          </td> 
        </tr> 
      </table> 
      <table width="900" border="0" align="center" cellpadding="0" cellspacing="0"> 
        <tr> 
          <td align="center" valign="middle">&nbsp;</td> 
        </tr> 
      </table> 
      <table width="900" border="0" align="center" cellpadding="0" cellspacing="0"> 
        <tr> 
          <td align="center" valign="middle">&nbsp;</td> 
        </tr> 
      </table></td> 
    <td width="9" align="center" valign="middle" background="images/sombraderecha.jpg">&nbsp;</td> 
  </tr> 
</table> 
<table width="890" border="0" align="center" cellpadding="0" cellspacing="0"> 
  <tr> 
    <td align="center" valign="middle" id="copy">Copyright 2007-2008 &copy; Todos los derechos reservados a Exportec</td> 
  </tr> 
  <tr> 
    <td align="center" valign="middle" id="copy">| Hospedado en: <a href="http://www.ideacorporativa.com" target="_blank">ideahosting</a> | Desarrollado por: <a href="http:/www.ideacorporativa.com" target="_blank">ideacorporativa</a> |</td> 
  </tr> 
</table> 
</body> 
</html>

b) select dependientes javascript

Código:


	Código HTML:
	function nuevoAjax()
{ 
	/* Crea el objeto AJAX. Esta funcion es generica para cualquier utilidad de este tipo, por
	lo que se puede copiar tal como esta aqui */
	var xmlhttp=false;
	try
	{
		// Creacion del objeto AJAX para navegadores no IE
		xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
	}
	catch(e)
	{
		try
		{
			// Creacion del objet AJAX para IE
			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		catch(E)
		{
			if (!xmlhttp && typeof XMLHttpRequest!='undefined') xmlhttp=new XMLHttpRequest();
		}
	}
	return xmlhttp; 
}

// Declaro los selects que componen el documento HTML. Su atributo ID debe figurar aqui.
var listadoSelects=new Array();
listadoSelects[0]="provincia";
listadoSelects[1]="oficina";

function buscarEnArray(array, dato)
{
	// Retorna el indice de la posicion donde se encuentra el elemento en el array o null si no se encuentra
	var x=0;
	while(array[x])
	{
		if(array[x]==dato) return x;
		x++;
	}
	return null;
}

function cargaContenido(idSelectOrigen)
{
	// Obtengo la posicion que ocupa el select que debe ser cargado en el array declarado mas arriba
	var posicionSelectDestino=buscarEnArray(listadoSelects, idSelectOrigen)+1;
	// Obtengo el select que el usuario modifico
	var selectOrigen=document.getElementById(idSelectOrigen);
	// Obtengo la opcion que el usuario selecciono
	var opcionSeleccionada=selectOrigen.options[selectOrigen.selectedIndex].value;
	// Si el usuario eligio la opcion "Elige", no voy al servidor y pongo los selects siguientes en estado "Selecciona opcion..."
	if(opcionSeleccionada==0)
	{
		var x=posicionSelectDestino, selectActual=null;
		// Busco todos los selects siguientes al que inicio el evento onChange y les cambio el estado y deshabilito
		while(listadoSelects[x])
		{
			selectActual=document.getElementById(listadoSelects[x]);
			selectActual.length=0;
			
			var nuevaOpcion=document.createElement("option"); nuevaOpcion.value=0; nuevaOpcion.innerHTML="Selecciona Opci&oacute;n...";
			selectActual.appendChild(nuevaOpcion);	selectActual.disabled=true;
			x++;
		}
	}
	// Compruebo que el select modificado no sea el ultimo de la cadena
	else if(idSelectOrigen!=listadoSelects[listadoSelects.length-1])
	{
		// Obtengo el elemento del select que debo cargar
		var idSelectDestino=listadoSelects[posicionSelectDestino];
		var selectDestino=document.getElementById(idSelectDestino);
		// Creo el nuevo objeto AJAX y envio al servidor el ID del select a cargar y la opcion seleccionada del select origen
		var ajax=nuevoAjax();
		ajax.open("GET", "select_dependientes_proceso.php?select="+idSelectDestino+"&opcion="+opcionSeleccionada, true);
		ajax.onreadystatechange=function() 
		{ 
			if (ajax.readyState==1)
			{
				// Mientras carga elimino la opcion "Selecciona Opcion..." y pongo una que dice "Cargando..."
				selectDestino.length=0;
				var nuevaOpcion=document.createElement("option"); nuevaOpcion.value=0; nuevaOpcion.innerHTML="Cargando...";
				selectDestino.appendChild(nuevaOpcion); selectDestino.disabled=true;	
			}
			if (ajax.readyState==4)
			{
				selectDestino.parentNode.innerHTML=ajax.responseText;
			} 
		}
		ajax.send(null);
	}
}

c) delect dependienes proceso .... PHP

Código PHP:

  <?php 
// Array que vincula los IDs de los selects declarados en el HTML con el nombre de la tabla donde se encuentra su contenido 
$listadoSelects=array( 
"provincia"=>"provincias", 
"oficina"=>"oficinas" 
); 
 
function validaSelect($selectDestino) 
{ 
    // Se valida que el select enviado via GET exista 
    global $listadoSelects; 
    if(isset($listadoSelects[$selectDestino])) return true; 
    else return false; 
} 
 
function validaOpcion($opcionSeleccionada) 
{ 
    // Se valida que la opcion seleccionada por el usuario en el select tenga un valor numerico 
    if(is_numeric($opcionSeleccionada)) return true; 
    else return false; 
} 
 
$selectDestino=$_GET["select"]; $opcionSeleccionada=$_GET["opcion"]; 
 
if(validaSelect($selectDestino) && validaOpcion($opcionSeleccionada)) 
{ 
    $tabla=$listadoSelects[$selectDestino]; 
    include 'conexion.php'; 
    conectar(); 
    $consulta=mysql_query("SELECT * FROM $tabla WHERE provincia='$opcionSeleccionada'") or die(mysql_error()); 
    desconectar(); 
     
    // Comienzo a imprimir el select 
    echo "<select name='".$selectDestino."' id='".$selectDestino."' onChange='cargaContenido(this.id)'>"; 
    echo "<option value='0'>Elige</option>"; 
    while($registro=mysql_fetch_row($consulta)) 
    { 
        // Convierto los caracteres conflictivos a sus entidades HTML correspondientes para su correcta visualizacion 
        $registro[1]=htmlentities($registro[1]); 
        // Imprimo las opciones del select 
        echo "<option value='".$registro[0]."'>".$registro[2]."</option>"; 
    }             
    echo "</select>"; 
} 
?>

Por favor que alguien me ayude que ya ni me entero de que esta pasando

millones e gracias a todos