Onchange Cambiar campos de formulario dinámicamente

Hola,
tengo un formulario en el que según la categoría que escoja el usuario, tiene que mostrar unas subcategorías u otras.
Es decir, el usuario puede seleccionar en una lista "Hotel", "Restaurante", "Termalismo"
Si escoje "Hotel", la lista de la subcategoría debe tomar los valores "1 estrella" "2 estrellas" o "3 estrellas"
Si escoje "Restaurante", la lista de la subcategoría debe tomar los valores "1 tenedor" "2 tenedores" "3 tenedores"
Si escoje "Termalismo", la lista de la subcategoría debe tomar los valores "Gratis" "De pago"

Pero algo no funciona es como si no entrara en la función que asigno a onChange. A continuación os pongo el código para ver qué se os ocurre:

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>Pension</option>
          <option>Casa Rural</option>
        <option>Museo</option>
          <option>Arquitectura</option>
          <option>Otros espacios</option>
          <option>Tiendas de ropa</option>
          <option>Bares y cafeterias</option>
          <option>Pubs</option>
          <option>Restaurante</option>
          <option>Termalismo</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="pension" style="display:none;">
    <label>Categoria:</label>
    <label><select name="catpension" >
          <option selected>3 Estrellas</option>
          <option>2 Estrellas</option>
     <option>1 Estrella</option>
        </select>
    </label>
</div>
<div id="casarural" style="display:none;">
    <label>Categoria:</label>
    <label><select name="catcasarural" >
          <option selected>Grupo A</option>
          <option>Grupo B</option>
     <option>Grupo C</option>
        </select>
    </label>
</div>
<div id="museo" style="display:none;">
    <label>Categoria:</label>
    <label><select name="catmuseo" >
          <option selected>Arqueol&oacute;gico</option>
          <option>Cera</option>
     <option>Tem&aacute;tico</option>
        </select>
    </label>
</div>
<div id="arquitectura" style="display:none;">
    <label>Categoria:</label>
    <label><select name="catarquitectura" >
          <option selected>Catedral</option>
          <option>Iglesia</option>
     <option>Centro Hist&oacute;rico</option>
     <option>Puente</option>
     <option>Edificio</option>
        </select>
    </label>
</div>
<div id="otrosespacios" style="display:none;">
    <label>Categoria:</label>
    <label><select name="catotrosespacios" >
          <option selected>Estatua</option>
          <option>Parque</option>
     <option>Exposici&oacute;n</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="pub" style="display:none;">
    <label>Categoria:</label>
    <label><select name="catpub" >
          <option selected>Primera hora</option>
          <option>&Uacute;ltima hora</option>
        </select>
    </label>
</div>
<div id="restaurante" style="display:none;">
    <label>Categoria:</label>
    <label><select name="catrestaurante" >
          <option selected>3 tenedores</option>
          <option>2 tenedores</option>
     <option>1 tenedor</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>
<div>
    <table><tr><td>
    <label align="top">Descripcion Breve:</label></td><td>
    <label><textarea name="descripcion"  cols="25" rows="5"></textarea></label>
    </td></tr>
    <tr><td>   
    <label>Foto cabecera</label></td><td>
    <label><input type="file" name="foto" /></label>
    </td></tr>
    <tr><td>
    <label>Descripcion:</label></td><td>
    <label><textarea name="descripcion"  cols="50" rows="19"></textarea></label>
    </td></tr>
    <tr><td>
    <label>Latitud:</label></td><td>
    <label><input type="text" name="lat"  /></label>
    </td></tr>
    <tr><td>
    <label>Longitud:</label></td><td>
    <label><input type="text" name="lng"  /></label>
    </td></tr>
    <tr><td>
   <input type="submit" name="enviar"  value="Enviar formulario" /></td><td>
        <input type="reset" name="vaciar"  value="Vaciar" />
    </td></tr>
    </table>
</div>     
</form>

Y el código javascript

Código Javascript :

<script type="text/javascript">
//<![CDATA[

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

   document.getElementById('hotel').style.display='none';
   document.getElementById('pension').style.display='none';
   document.getElementById('casarural').style.display='none';
   document.getElementById('museo').style.display='none';
   document.getElementById('arquitectura').style.display='none';
   document.getElementById('otrosespacios').style.display='none';
   document.getElementById('tiendasropa').style.display='none';
   document.getElementById('bares').style.display='none';
   document.getElementById('pub').style.display='none';
   document.getElementById('restaurante').style.display='none';
   document.getElementById('termalismo').style.display='none';

   switch(categoria)
   {
   case "Hotel":
      document.getElementById('hotel').style.display='block';      
      break;
   case "Pension":
      document.getElementById('pension').style.display='block';
      break;
   case "Casa Rural":
      document.getElementById('casarural').style.display='block';
      break;
   case "Museo":
      document.getElementById('museo').style.display='block';
      break;
   case "Arquitectura":
      document.getElementById('arquitectura').style.display='block';
      break;
   case "Otros espacios":
      document.getElementById('otrosespacios').style.display='block';
      break;
   case "Tiendas de ropa":
      document.getElementById('tiendasropa').style.display='block';
      break;
   case "Bares y cafeterias":
      document.getElementById('bares').style.display='block';
      break;
   case "Pubs":
      document.getElementById('pub').style.display='block';
      break;
   case "Restaurante":
      document.getElementById('restaurante').style.display='block';
      break;
   case "Termalismo":
      document.getElementById('termalismo').style.display='block';
      break;
   }
   
}
//]]>
</script>

Gracias y un saludo.

probaste si esta arrojando algun error de javascript con el control de errores de firefox ?

has con el metodo onBlur mejor

Saludos

con ambos deberia funcionar mas bn revisa en firefox y el control de errores a ver si esta arrojando algun error

Código HTML :

<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" id="tipo" onChange="javascript:getcategoria();return false"> 
          <option selected>Hotel</option> 
          <option>Pension</option> 
          <option>Casa Rural</option> 
        <option>Museo</option> 
          <option>Arquitectura</option> 
          <option>Otros espacios</option> 
          <option>Tiendas de ropa</option> 
          <option>Bares y cafeterias</option> 
          <option>Pubs</option> 
          <option>Restaurante</option> 
          <option>Termalismo</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="pension" style="display:none;"> 
    <label>Categoria:</label> 
    <label><select name="catpension"> 
          <option selected>3 Estrellas</option> 
          <option>2 Estrellas</option> 
     <option>1 Estrella</option> 
        </select> 
    </label> 
</div> 
<div id="casarural" style="display:none;"> 
    <label>Categoria:</label> 
    <label><select name="catcasarural" > 
          <option selected>Grupo A</option> 
          <option>Grupo B</option> 
     <option>Grupo C</option> 
        </select> 
    </label> 
</div> 
<div id="museo" style="display:none;"> 
    <label>Categoria:</label> 
    <label><select name="catmuseo" > 
          <option selected>Arqueol&oacute;gico</option> 
          <option>Cera</option> 
     <option>Tem&aacute;tico</option> 
        </select> 
    </label> 
</div> 
<div id="arquitectura" style="display:none;"> 
    <label>Categoria:</label> 
    <label><select name="catarquitectura" > 
          <option selected>Catedral</option> 
          <option>Iglesia</option> 
     <option>Centro Hist&oacute;rico</option> 
     <option>Puente</option> 
     <option>Edificio</option> 
        </select> 
    </label> 
</div> 
<div id="otrosespacios" style="display:none;"> 
    <label>Categoria:</label> 
    <label><select name="catotrosespacios" > 
          <option selected>Estatua</option> 
          <option>Parque</option> 
     <option>Exposici&oacute;n</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="pub" style="display:none;"> 
    <label>Categoria:</label> 
    <label><select name="catpub" > 
          <option selected>Primera hora</option> 
          <option>&Uacute;ltima hora</option> 
        </select> 
    </label> 
</div> 
<div id="restaurante" style="display:none;"> 
    <label>Categoria:</label> 
    <label><select name="catrestaurante" > 
          <option selected>3 tenedores</option> 
          <option>2 tenedores</option> 
     <option>1 tenedor</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> 
<div> 
    <table><tr><td> 
    <label align="top">Descripcion Breve:</label></td><td> 
    <label><textarea name="descripcion"  cols="25" rows="5"></textarea></label> 
    </td></tr> 
    <tr><td>    
    <label>Foto cabecera</label></td><td> 
    <label><input type="file" name="foto" /></label> 
    </td></tr> 
    <tr><td> 
    <label>Descripcion:</label></td><td> 
    <label><textarea name="descripcion"  cols="50" rows="19"></textarea></label> 
    </td></tr> 
    <tr><td> 
    <label>Latitud:</label></td><td> 
    <label><input type="text" name="lat"  /></label> 
    </td></tr> 
    <tr><td> 
    <label>Longitud:</label></td><td> 
    <label><input type="text" name="lng"  /></label> 
    </td></tr> 
    <tr><td> 
   <input type="submit" name="enviar"  value="Enviar formulario" /></td><td> 
        <input type="reset" name="vaciar"  value="Vaciar" /> 
    </td></tr> 
    </table> 
</div>      
</form> 

JavaScript:

Código Javascript :

<script type="text/javascript"> 
//<![CDATA[ 
 
function getcategoria() 
{ 
   var categoria; 
   categoria = document.getElementById('tipo').value; 
   document.getElementById('hotel').style.display='none'; 
   document.getElementById('pension').style.display='none'; 
   document.getElementById('casarural').style.display='none'; 
   document.getElementById('museo').style.display='none'; 
   document.getElementById('arquitectura').style.display='none'; 
   document.getElementById('otrosespacios').style.display='none'; 
   document.getElementById('tiendasropa').style.display='none'; 
   document.getElementById('bares').style.display='none'; 
   document.getElementById('pub').style.display='none'; 
   document.getElementById('restaurante').style.display='none'; 
   document.getElementById('termalismo').style.display='none'; 
   switch(categoria) 
   { 
   case "Hotel": 
      document.getElementById('hotel').style.display='block';       
      break; 
   case "Pension": 
      document.getElementById('pension').style.display='block'; 
      break; 
   case "Casa Rural":
      document.getElementById('casarural').style.display='block'; 
      break; 
   case "Museo": 
      document.getElementById('museo').style.display='block'; 
      break; 
   case "Arquitectura": 
      document.getElementById('arquitectura').style.display='block'; 
      break; 
   case "Otros espacios": 
      document.getElementById('otrosespacios').style.display='block'; 
      break; 
   case "Tiendas de ropa": 
      document.getElementById('tiendasropa').style.display='block'; 
      break; 
   case "Bares y cafeterias": 
      document.getElementById('bares').style.display='block'; 
      break; 
   case "Pubs": 
      document.getElementById('pub').style.display='block'; 
      break; 
   case "Restaurante": 
      document.getElementById('restaurante').style.display='block'; 
      break; 
   case "Termalismo": 
      document.getElementById('termalismo').style.display='block'; 
      break; 
   } 
    
} 
//]]> 
</script> 

Hola espero te sea de ayuda, hice unos toques en el código y ya funciona como quieres, solo agregué la propiedad value de cada opción ( value=Hotel....etc.). coloque el this como parametro de la función getcategoria(this) más el id="tipo" en el select, quite esta asignación en el script categoria = document.getElementById('tipo') y coloque esta otra categoria = tipo.value; de resto todo igual.

aqui te copio el codigo que funciona

el script

<script type="text/javascript">
//<![CDATA[

function getcategoria(tipo)
{




var categoria;
//categoria = document.getElementById('tipo');
categoria = tipo.value;

document.getElementById('hotel').style.display='none';
document.getElementById('pension').style.display='none';
document.getElementById('casarural').style.display='none';
document.getElementById('museo').style.display='none';
document.getElementById('arquitectura').style.display='none';
document.getElementById('otrosespacios').style.display='none';
document.getElementById('tiendasropa').style.display='none';
document.getElementById('bares').style.display='none';
document.getElementById('pub').style.display='none';
document.getElementById('restaurante').style.display='none';
document.getElementById('termalismo').style.display='none';

switch(categoria)
{
case 'Hotel':
document.getElementById('hotel').style.display='block';
break;
case "Pension":
document.getElementById('pension').style.display='block';
break;
case "Casa Rural":
document.getElementById('casarural').style.display='block';
break;
case "Museo":
document.getElementById('museo').style.display='block';
break;
case "Arquitectura":
document.getElementById('arquitectura').style.display='block';
break;
case "Otros espacios":
document.getElementById('otrosespacios').style.display='block';
break;
case "Tiendas de ropa":
document.getElementById('tiendasropa').style.display='block';
break;
case "Bares y cafeterias":
document.getElementById('bares').style.display='block';
break;
case "Pubs":
document.getElementById('pub').style.display='block';
break;
case "Restaurante":
document.getElementById('restaurante').style.display='block';
break;
case "Termalismo":
document.getElementById('termalismo').style.display='block';
break;
}

}
//]]>
</script>


el html

<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" id="tipo" onchange="getcategoria(this);">
<option selected value="Hotel">Hotel</option>
<option value="Pension">Pension</option>
<option value="Casa Rural">Casa Rural</option>
<option value="Museo">Museo</option>
<option value="Arquitectura">Arquitectura</option>
<option value="Otros espacios">Otros espacios</option>
<option value="Tiendas de ropa">Tiendas de ropa</option>
<option value="Bares y cafeterias">Bares y cafeterias</option>
<option value="Pubs">Pubs</option>
<option value="Restaurante">Restaurante</option>
<option value="Termalismo">Termalismo</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="pension" style="display:none;">
<label>Categoria:</label>
<label><select name="catpension" >
<option selected>3 Estrellas</option>
<option>2 Estrellas</option>
<option>1 Estrella</option>
</select>
</label>
</div>
<div id="casarural" style="display:none;">
<label>Categoria:</label>
<label><select name="catcasarural" >
<option selected>Grupo A</option>
<option>Grupo B</option>
<option>Grupo C</option>
</select>
</label>
</div>
<div id="museo" style="display:none;">
<label>Categoria:</label>
<label><select name="catmuseo" >
<option selected>Arqueol&oacute;gico</option>
<option>Cera</option>
<option>Tem&aacute;tico</option>
</select>
</label>
</div>
<div id="arquitectura" style="display:none;">
<label>Categoria:</label>
<label><select name="catarquitectura" >
<option selected>Catedral</option>
<option>Iglesia</option>
<option>Centro Hist&oacute;rico</option>
<option>Puente</option>
<option>Edificio</option>
</select>
</label>
</div>
<div id="otrosespacios" style="display:none;">
<label>Categoria:</label>
<label><select name="catotrosespacios" >
<option selected>Estatua</option>
<option>Parque</option>
<option>Exposici&oacute;n</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="pub" style="display:none;">
<label>Categoria:</label>
<label><select name="catpub" >
<option selected>Primera hora</option>
<option>&Uacute;ltima hora</option>
</select>
</label>
</div>
<div id="restaurante" style="display:none;">
<label>Categoria:</label>
<label><select name="catrestaurante" >
<option selected>3 tenedores</option>
<option>2 tenedores</option>
<option>1 tenedor</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>
<div>
<table><tr><td>
<label align="top">Descripcion Breve:</label></td><td>
<label><textarea name="descripcion" cols="25" rows="5"></textarea></label>
</td></tr>
<tr><td>
<label>Foto cabecera</label></td><td>
<label><input type="file" name="foto" /></label>
</td></tr>
<tr><td>
<label>Descripcion:</label></td><td>
<label><textarea name="descripcion" cols="50" rows="19"></textarea></label>
</td></tr>
<tr><td>
<label>Latitud:</label></td><td>
<label><input type="text" name="lat" /></label>
</td></tr>
<tr><td>
<label>Longitud:</label></td><td>
<label><input type="text" name="lng" /></label>
</td></tr>
<tr><td>
<input type="submit" name="enviar" value="Enviar formulario" /></td><td>
<input type="reset" name="vaciar" value="Vaciar" />
</td></tr>
</table>
</div>
</form>