Foros del Web - Ver Mensaje Individual

iovan · #12 (**permalink**) 29/05/2010, 09:19

Hola amigo, bueno verás el manejo del JS dentro de las etiquetas HTML estan incorrectas para la funcion que hemos creado, sin embargo si modificamos un poco el script entonces la forma en la que ejecutas la funcion sería correcta.

Pasemos a ver como lo modificaremos.

Primero tenemos la siguiente funcion:

Código Javascript:

Ver original<script language="javascript" type="text/javascript">
  function showOptions(s,h){
        document.getElementById(s).style.display = 'block';
        document.getElementById(h).style.display = 'none';
  }
</script>

En la linea 2 podemos agregar tantas letras queramos en el parentecis, (cada una que corresponda al nombre de cada etiqueta que querramos mostrar u ocultar)

ejemplo.

a: La etiqueta que mostraras
b: las etiquetas ocultas
c: las etiquetas ocultas
d: las etiquetas ocultas

Por lo tanto podemos modificar esta linea de la sig manera:

Código Javascript:

Ver originalfunction showOptions(a,b,c,d){

Y por ultimo hay que programar la funcion, pasemos a decir que etiquetas se muestra mientras cuales se deben ocultar, esto lo haremos de la sig manera.

Código Javascript:

Ver originaldocument.getElementById(a).style.display = 'block';
document.getElementById(b).style.display = 'none';
document.getElementById(c).style.display = 'none';
document.getElementById(d).style.display = 'none';

Por lo tanto el código completo quedaría de la sig manera

Código HTML:

Ver original<fieldset><legend>Tipo de Punto de Interés:</legend>
    
    
    <script language="javascript" type="text/javascript">
 
        function showOptions(a,b,c,d){
   
              document.getElementById(a).style.display = 'block';
   
              document.getElementById(b).style.display = 'none';
              document.getElementById(c).style.display = 'none';
              document.getElementById(d).style.display = 'none';
 
        }
  
      </script>
 
      </head>
 
      <body>
 
      <form action="routing.php" method="post">
 
            <select>
  
             <option onclick="showOptions('restaurante','hotel','pub','bar');">Restaurante</option>
 
             <option onclick="showOptions('hotel','pub','restaurante','bar',);">Hotel</option>
 
         <option onclick="showOptions('bar','hotel','pub','restaurante');">Bar</option>
 
         <option onclick="showOptions('pub','restaurante','hotel','bar');">Pub</option>
  
            </select>
  
            <div id="hotel" style="display:none;">
         
    <INPUT type="hidden" NAME="tipo" value="hotel">
    <INPUT TYPE="CHECKBOX" NAME="B&B" value="B&B">Bed&Breakfast<BR>
    <INPUT TYPE="CHECKBOX" NAME="Parking" value="Parking">Parking privado<BR>
    <INPUT TYPE="CHECKBOX" NAME="Wifi" value="Wifi">Wifi<BR>
    <INPUT TYPE="CHECKBOX" NAME="Piscina" value="Piscina">Piscina<BR>
    <INPUT TYPE="CHECKBOX" NAME="Animacion" value="Animacion">Servicio de Animacion<BR>
 
            </div>
 
            <div id="restaurante" style="display:none;">
 
    <INPUT TYPE="hidden" NAME="tipo" value="restaurante">
    <INPUT TYPE="CHECKBOX" NAME="ServicioDomicilio" value="ServicioDomicilio">Servicio a domicilio<BR>
    <INPUT TYPE="CHECKBOX" NAME="PPV" value="PPV">PPV<BR>
    <INPUT TYPE="CHECKBOX" NAME="Parkingprivado" value="Parkingprivado">Parking privado<BR>
        <INPUT TYPE="CHECKBOX" NAME="Menuinfantil" value="Menuinfantil">Menu infantil<BR>
    <INPUT TYPE="CHECKBOX" NAME="Menuvegetariano" value="Menuvegetariano">Menu vegetariano<BR>
    <INPUT TYPE="CHECKBOX" NAME="Bodas" value="Bodas">Salon especial para bodas<BR>
 
           </div>
 
    <div id="bar" style="display:none;">
 
    <INPUT TYPE="hidden" NAME="tipo" value="bar">
    <INPUT TYPE="CHECKBOX" NAME="ServicioDomicilio" value="ServicioDomicilio">Servicio a domicilio<BR>
    <INPUT TYPE="CHECKBOX" NAME="PPV" value="PPV">PPV<BR>
    <INPUT TYPE="CHECKBOX" NAME="Parkingprivado" value="Parkingprivado">Parking privado<BR>
        <INPUT TYPE="CHECKBOX" NAME="Menudia" value="Menudia">Menu del dia<BR>
    <INPUT TYPE="CHECKBOX" NAME="Sidreria" value="Sidreria">Sidreria<BR>
    <INPUT TYPE="CHECKBOX" NAME="TakeAway" value="TakeAway">Menus para llevar<BR>
 
           </div>
 
 
    <div id="pub" style="display:none;">
 
    <INPUT TYPE="hidden" NAME="tipo" value="pub">
    <INPUT TYPE="CHECKBOX" NAME="billar" value="billar">Billar<BR>
    <INPUT TYPE="CHECKBOX" NAME="Pistabaile" value="Pistabaile">Pista de baile<BR>
    <INPUT TYPE="CHECKBOX" NAME="cocteles" value="cocteles">Carta de cocteles<BR>
        <INPUT TYPE="CHECKBOX" NAME="chupitos" value="chupitos">Carta de chupitos<BR>
    <INPUT TYPE="CHECKBOX" NAME="karaoke" value="karaoke">karaoke<BR>
 
           </div>
 
    
 
    </fieldset>

Espero que se entienda.

Saludos amigo.