Cómo crear el menú desplegable que aparece en función de la respuesta de otro menú desplegable

Question

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.

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.

Answer 1

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> 

Answer 2

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.

Answer 3

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.