Menú select con respuestas diferentes

sjj · #1 (**permalink**) 07/05/2012, 14:03

Hola. Estoy intentando generar un formulario en PHP el cual contenga un menú select de opciones. Dependiendo de la opción elegida, lo que se muestre en pantalla será diferente, pero debe mostrarse automáticamente y no luego de presionar algún botón. Es el típico caso en el cual en un primer menú select se elige el país de residencia, y dependiendo de eso, en el segundo nos mostrará las provincias o regiones de ese país. Estuve leyendo un poco y vi que se puede hacer creando una base de datos y con MYSQL. El tema es que como este es un proyecto sencillo, no tenía pensado incluir una base de datos. ¿Es la única forma de hacer esto? ¿O hay alguna otra? Como siempre, muchas gracias por sus respuestas.

ocp001a · #2 (**permalink**) 07/05/2012, 14:28

Puedes hacerlo con código, o con un archivo de texto que contenga las opciones.

Lo de no usar el botón, se puede lograr colocando el evento onchange al select, aunque esto ya no es cosa de php si no de javascript.

sjj · #3 (**permalink**) 07/05/2012, 19:39

Gracias. Comprendo lo del OnChange junto al nombre de la nueva página cuando lo que se quiere es que al seleccionar una opción nos lleve directamente a otra página. Lo que yo buscaba es algo parecido a esto: http://www.rentalcars.com/

Dependiendo de lo que uno elija en el primer combo, se habilita el segundo y muestra distintas opciones, pero nunca sale de la página. No se redirige. Leí por ahí que eso se hace con AJAX o con MySQL. Quería saber si era posible solo con PHP y javascript como en el caso de los redireccionamientos.

memoadian · #4 (**permalink**) 07/05/2012, 19:42

es que AJAX es solo php con javascript

ocp001a · #5 (**permalink**) 07/05/2012, 22:34

No es obligatorio el uso de bases de datos ni ajax como tal. Si tu script php genera el código javascript adecuado, es posible con sólo javascript tener cargados en memoria los datos de los selects, aunque sólo te recomendaría esto si son pocas opciones para no saturar la memoria del navegador. Claro que lo más recomendable es mediante ajax.

sjj · #6 (**permalink**) 08/05/2012, 11:24

Ahí armé algo con PHP y Javascript. Este código funciona perfectamente y me trae los países como necesito. El único problema que tengo ahora es que tuve que poner la información para que me la devuelva en forma de cadena de texto. Yo necesitaría que la respuesta en lugar de ser un texto, sea un menú select. Les dejo lo que armé por si es de ayuda o a alguien le sirve:

pagina 1.html

Código HTML:

<html>
<head>
<title>Problema</title>
<script src="funciones.js" language="JavaScript"></script>
</head>
<body>
<h3>Seleccione su país de residencia.</h3>
<div id="menu">
<p><a id="enlace1" href="pagina1.php?cod=1">Argentina</a></p>
<p><a id="enlace2" href="pagina1.php?cod=2">Resto del Mundo</a></p>
</div>
<div id="detalles">Seleccione su signo.</div>
</body>
</html>

pagina 1.php

Código PHP:

 
<html> 
<head> 
<title>Problema</title> 
<script src="funciones.js" language="JavaScript"></script> 
</head> 
<body> 
 
<? 
if ($_REQUEST['cod']==1) 
  echo "Las provincias en que ofrecemos nuestros servicios son Buenos Aires, Córdoba, La Pampa y Santa Fe"; 
if ($_REQUEST['cod']==2) 
  echo "Los países en que ofrecemos nuestros servicios son Brasil, Bolivia, Chile, Paraguay y Uruguay"; 
 ?> 
 
</body> 
</html>

funciones.js

Código:

addEvent(window,'load',inicializarEventos,false);

function inicializarEventos()
{
  var ob;
  for(f=1;f<=2;f++)
  {
    ob=document.getElementById('enlace'+f);
    addEvent(ob,'click',presionEnlace,false);
  }
}

function presionEnlace(e)
{
  if (window.event)
  {
    window.event.returnValue=false;
    var url=window.event.srcElement.getAttribute('href');
    cargarPais(url);     
  }
  else
    if (e)
    {
      e.preventDefault();
      var url=e.target.getAttribute('href');
      cargarPais(url);     
    }
}


var conexion1;
function cargarPais(url) 
{
  if(url=='')
  {
    return;
  }
  conexion1=crearXMLHttpRequest();
  conexion1.onreadystatechange = procesarEventos;
  conexion1.open("GET", url, true);
  conexion1.send(null);
}

function procesarEventos()
{
  var detalles = document.getElementById("detalles");
  if(conexion1.readyState == 4)
  {
    detalles.innerHTML = conexion1.responseText;
  } 
  else 
  {
    detalles.innerHTML = 'Cargando...';
  }
}

function addEvent(elemento,nomevento,funcion,captura)
{
  if (elemento.attachEvent)
  {
    elemento.attachEvent('on'+nomevento,funcion);
    return true;
  }
  else  
    if (elemento.addEventListener)
    {
      elemento.addEventListener(nomevento,funcion,captura);
      return true;
    }
    else
      return false;
}

function crearXMLHttpRequest() 
{
  var xmlHttp=null;
  if (window.ActiveXObject) 
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  else 
    if (window.XMLHttpRequest) 
      xmlHttp = new XMLHttpRequest();
  return xmlHttp;
}

sjj · #7 (**permalink**) 11/05/2012, 13:33

Bueno, finalmente conseguí hacerlo. Dejo el código por si a alguien le sirve:

Código HTML:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<script language='javascript' src="popcalendar.js">
</script>
<script> 
function cambiar(que){ 
if(document.form1.select.selectedIndex==0){document.getElementById('provincia').innerHTML='';return;} 
bsas=new Array('Aeropuerto Ezeiza','Bahía Blanca','Bahía Blanca Apt','Escobar','La Plata','Lobos','Mar del Plata','Mar del Plata Apt','Pergamino','Pilar','Pinamar','Rojas','Villa Gesell'); 
capital=new Array('Aeroparque Jorge Newbery','Buenos Aires, Centro','Belgrano','Palermo','Puerto Madero');
chaco=new Array('Resistencia Apt'); 
chubut=new Array('Comodoro Rivadavia, Centro','Comodoro Rivadavia Apt','Esquel Centro','Esquel Apt','Puerto Madryn Centro','Puerto Madryn Apt','Trelew, Centro','Trelew Apt'); 
result=eval(que); 
cadena=''; 
for(i=0;i<result.length;i++){ 
cadena+="<option value=\""+result[i]+"\">"+result[i]+"</option>"; 
} 
document.getElementById('provincia').innerHTML="<select name=\"select2\">"+cadena+"</select>"; 
} 
</script>   
</head>

<body>
<form name="reserva" method="post" action=""> 
  País
    <select name="zona">
      <option selected value="">
	  <option selected value="argentina">Argentina
      <option value="resto">Resto del Mundo
    </select>
  <p>Provincia
    <select name="select" onchange="cambiar(this.value)"> 
    <option selected value=""></option> 
    <option value="bsas">Buenos Aires</option> 
    <option value="capital">Capital Federal</option>
    <option value="chaco">Chaco</option> 
    <option value="chubut">Chubut</option> 
  </select> 
  
  <div id="provincia" style="display:inline"></div>
  
  <p>Tipo de Auto
    <select name="liste1" size="1">
      <option selected value="">
      <option value="economico.php">Económico
      <option value="http://www.yahoo.com.ar">Familiar
      <option value="http://www.yahoo.com.ar">Grande
    </select>
  </p>
  <p>Fecha de Alquiler
    <input name="fecalq" type="text" id="fecalq" onclick="popUpCalendar(this, fecalq, 'dd/mm/yyyy');"/>
  </p>
  <p>Fecha de Devolución
    <input name="fecdevol" type="text" id="fecdevol" onclick="popUpCalendar(this, fecdevol, 'dd/mm/yyyy');"/>
      
    
    <p><input type="button" value="Buscar"
  onClick="if (form.liste1.selectedIndex != 0)
      location = form.liste1.options[form.liste1.selectedIndex].value;
    else
      alert('Por favor, seleccione una opción')">
      </p>
</form>

</body>
</html>

Y acá está el formulario: http://www.elegircarilo.com.ar/prueba.php

El único tema que me quedó es que me gustaría poner un texto a la izquierda del menú de lugares que depende del primero. ¿Alguien tiene idea de cómo hacerlo?