onchange Cambiar estaticamente campos de formulario

riestra · #1 (**permalink**) 11/06/2009, 05:22

Hola, tengo un problema con el onChange.
Tengo 2 listas/menu. La lista2 depende del valor que haya seleccionado el usuario en la lista1, de forma que si en lista1 ha seleccionado "Hotel", en lista2 aparecerán 3 posibles valores "3 estrellas", "2 estrellas", "1 estrella".
Si en lista1 lo que selecciona es "Restaurante" lista2 cambiará para las posibles categorías "3 tenedores", "2 tenedores", "1 tenedor"
Todo esto lo esty haciendo de forma estática, pero no sé que estoy haciendo mal...
Os pongo el código a ver si podeis echarme una mano.

Código PHP:

  <form  name="formulario" method="post" action="procesar_marca.php" onsubmit="return validar()"> 
   
<div id="nombre"> 
    <table><tr><td> 
    <label>Nombre:</label> 
    <label><input name="nombre" type="text" size="50"  /></label> 
    </td></tr><tr><td>     
    <label>Tipo:</label> 
    <label><select name="tipo" onchange="getcategoria();return false"> 
          <option selected>Hotel</option>          
          <option>Tiendas de ropa</option> 
          <option>Bares y cafeterias</option> 
          
        </select> 
    </label> 
    </td></tr></table> 
</div> 
<div id="hotel" style="display:block;"> 
    <label>Categoria:</label> 
    <label><select name="cathotel" > 
          <option selected>4 Estrellas</option> 
          <option>3 Estrellas</option> 
          <option>2 Estrellas</option> 
      <option>1 Estrella</option> 
        </select> 
    </label> 
</div> 
 
 
<div id="tiendasropa" style="display:none;"> 
    <label>Categoria:</label> 
    <label><select name="cattiendasropa" > 
          <option selected>Deporte</option> 
          <option>Informal</option> 
        </select> 
    </label> 
</div> 
<div id="bares" style="display:none;"> 
    <label>Categoria:</label> 
    <label><select name="catbares" > 
          <option selected>Bar</option> 
          <option>Cafeteria</option> 
        </select> 
    </label> 
</div> 
 
<div id="termalismo" style="display:none;"> 
    <label>Categoria:</label> 
    <label><select name="cattermalismo" > 
          <option selected>Gratis</option> 
          <option>Pago</option> 
        </select> 
    </label> 
</div>

y el javascript

Código:

<script type="text/javascript">

function getcategoria()
{
	var categoria;
	categoria = document.getElementById('tipo');

	document.getElementById('hotel').style.display='none';
	document.getElementById('tiendasropa').style.display='none';
	document.getElementById('bares').style.display='none';
	alert("Hola");

	switch(categoria)
	{
	case "Hotel":
	alert("Hola2");
		document.getElementById('hotel').style.display='block';		
		break;

	case "Tiendas de ropa":
	alert("Hola3");
		document.getElementById('tiendasropa').style.display='block';
		break;
	case "Bares y cafeterias":
		document.getElementById('bares').style.display='block';
		break;

	}
	
}
 
</script>

Cualquier ayuda es bien recibida. Gracias.

quimfv · #2 (**permalink**) 11/06/2009, 05:37

El ejemplo tipico de lo que pides se ha resuelto muchas veces, con el ejemplo de paises y sus ciudades. No tengo la referencia del post que respondi yo pero busca... que lo que pides esta resuelto....

Ufff voy y encuentro el ejemplo que mande!!!!

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<script language="JavaScript">

function addOpt(oCntrl, iPos, sTxt, sVal){
var selOpcion=new Option(sTxt, sVal);
eval(oCntrl.options[iPos]=selOpcion);
}

function cambia(obj,Cntrl){
var oCntrl=document.getElementById(Cntrl);
while (oCntrl.length!=0){
	oCntrl.remove(0);
}
switch (obj.selectedIndex){
case 0:
addOpt(oCntrl, 0, "Antes elige pais", "0");
break;
case 1:
addOpt(oCntrl, 0, "Cudades de Mx", "0");
addOpt(oCntrl, 1, "Ciudad de México", "1");
addOpt(oCntrl, 2, "Monterrey", "2");
addOpt(oCntrl, 3, "Guadalajara", "3");
break;
case 2:
addOpt(oCntrl, 0, "Cudades de Es", "0");
addOpt(oCntrl, 1, "Madrid", "1");
addOpt(oCntrl, 2, "Barcelona", "2");
addOpt(oCntrl, 3, "San Sebastián", "3");
break;
case 3:
addOpt(oCntrl, 0, "Cudades de Vn", "0");
addOpt(oCntrl, 1, "Caracas", "1");
addOpt(oCntrl, 2, "Coro", "2");
addOpt(oCntrl, 3, "Maracay", "3");
addOpt(oCntrl, 4, "Valencia", "4");
break;
}
}
</script>
<body>



<form name="form">
<table border="0">
<tr>
<td>

Pais
</td>
<td>
<select name="pais" id="pais" onChange="cambia(this,'ciudad')">
<option value="0">Elige pais</option>
<option value="Mex">Mexico</option>
<option value="Esp">España</option>
<option value="Ven">Venezuela</option>
</select>
</td>
<td>&nbsp;

</td>

<td>
Ciudad
</td>
<td>
<select name="ciudad"  id="ciudad">
<option value="0">Antes elige pais</option>
</select>
</td>
</tr>
</table>
<table border="0">
<tr>
<td>
Pais
</td>
<td>

<select name="pais2" id="pais2" onChange="cambia(this,'ciudad2')">
<option value="0">Elige pais</option>
<option value="Mex">Mexico</option>
<option value="Esp">España</option>
<option value="Ven">Venezuela</option>
</select>
</td>
<td>&nbsp;

</td>
<td>
Ciudad
</td>

<td>
<select name="ciudad2"  id="ciudad2">
<option value="0">Antes elige pais</option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>

Antes de preguntar usa el buscador....

Quim