2012-08-02 37 views
6

Estoy intentando crear una página en la que los usuarios tengan que realizar selecciones múltiples que se basen entre sí. ¿Cómo se crea un formulario para que aparezca un tipo específico de menú desplegable n. ° 2 basado en la selección del usuario en el menú desplegable n. ° 1.Cómo crear el menú desplegable que aparece en función de la respuesta de otro menú desplegable

Por ejemplo, supongamos que un usuario tiene que elegir una "categoría de producto" y una "subcategoría de producto". Si un usuario elige "ropa de cama" desde el primer menú desplegable, aparece un segundo menú desplegable con opciones como "cama, colchón, almohada".

Para ampliar este ejemplo, digamos que el usuario eligió "electrónica" en lugar de "ropa de cama". Luego, el segundo menú desplegable tendría opciones como "televisión, reproductores mp3, computadoras".

¿Cómo se puede hacer algo así? ¿Es algo que harías en HTML/CSS o en alguna otra forma?

¡Gracias por la ayuda!

EDITAR - Estoy usando Django/Python para construir este sitio web junto con HTML, CSS y Javascript.

Respuesta

6

Se puede utilizar una combinación de HTML y JavaScript (JSFIDDLE):

<select id="opts" onchange="showForm()"> 
    <option value="0">Select Option</option> 
    <option value="1">Option 1</option> 
    <option value="2">Option 2</option> 
</select> 

<div id="f1" style="display:none"> 
    <form name="form1"> 
     <select id="opts" onchange="showForm()"> 
      <option value="0">Select Option</option> 
      <option value="1">Option 1A</option> 
      <option value="2">Option 1B</option> 
     </select> 
    </form> 
</div> 

<div id="f2" style="display:none"> 
    <form name="form2"> 
     <select id="opts" onchange="showForm()"> 
      <option value="0">Select Option</option> 
      <option value="1">Option 2A</option> 
      <option value="2">Option 2B</option> 
     </select> 
    </form> 
</div> 

<script type="text/javascript"> 
    function showForm() { 
     var selopt = document.getElementById("opts").value; 
     if (selopt == 1) { 
      document.getElementById("f1").style.display = "block"; 
      document.getElementById("f2").style.display = "none"; 
     } 
     if (selopt == 2) { 
      document.getElementById("f2").style.display = "block"; 
      document.getElementById("f1").style.display = "none"; 
     } 
     if (selopt == 0) { 
      document.getElementById("f2").style.display = "none"; 
      document.getElementById("f1").style.display = "none"; 
     } 
    } 
</script> 
+0

¡Perfecto! Gracias por la ayuda – goelv

+0

¿Cómo escribirías lo anterior usando CSS externo? Sé cómo hacerlo en HTML, pero en el código JS, ¿uno lo deja como se muestra o también llama a la hoja de estilos? – wordman

+0

@wordman No estoy muy seguro de lo que quieres decir, ¿puedes vincular tu código? – amiregelz

3

gusta esta? Creado un violín js. http://jsfiddle.net/wigster/MeTQQ/

Se agarra el valor de la lista desplegable, y luego si coincide con la regla, se deberá definir la otra caja desplegable para mostrar, en caso contrario, mantiene ese otro cuadro desplegable oculto.

+2

No es un mal punto de partida +1, pero probablemente podría usar alguna explicación más. – AlexMA

+0

Saludos por la entrada - se agregó una breve descripción - se aumentó. –

1

Si desea utilizar jQuery, puede utilizar este caso de prueba: http://jsfiddle.net/exXmJ/

La forma en que veo que hay dos maneras de ir. Elimine el menú desplegable y cámbielo por uno nuevo u oculte/muestre dos menús desplegables diferentes. Alexander cubrió el segundo método, así que no entraré en eso.

+0

Nota al margen: no usaría el ejemplo de Alexander exactamente como está, principalmente porque usa css en línea. Debe colocar el CSS en una hoja de estilos para separar el diseño del marcado. El enfoque real está bien, aunque un detector de eventos podría ser mejor que un atributo onclick = "". – thomasmyrman

Cuestiones relacionadas