2

Tengo este código:

<fieldset>
  <section>
    <label class="label">Select an option</label>
    <label class="select">
      <select required>
        <option value="" selected="selected" disabled="disabled">Select an option</option>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
        <option value="D">D</option>
        <option value="E">E</option>
      </select>
      <i></i>
    </label>
  </section>
  <section>
    <label class="label">Select another option</label>
    <div class="row">
      <div class="col col-3">
        <label class="radio state-success"><input type="radio" name="radio" id="radio" value="1" checked><i></i>1</label>
      </div>
      <div class="col col-3">
        <label class="radio state-success"><input type="radio" name="radio" id="radio"  value="2" ><i></i>2</label>
      </div>
    </div>
  </section>
</fieldset>

Actualmente los dos seleccionables se muestran uno encima de otro. Me gustaría hacer que el segundo seleccionable aparezca tras haber completado el primero y a poder ser, que el segundo seleccionable varíe en función de la primera opción que se escoja. ¿Cómo puedo hacer?

2
  • Que haz intentado? tienes algo que se pueda ver para saber que intentas hacer?
    – cignius
    Commented el 17 dic. 2016 a las 2:35
  • Sólo hay un select, ¿dónde está el segundo?
    – Alvaro Montoro
    Commented el 17 dic. 2016 a las 5:19

3 respuestas 3

0

Para este tipo de ejercicio necesitas Javascript. Piensa que debes recoger el valor del input inicial para, una vez seleccionado, mostrar un contenido u otro en el secundario. Aquí tienes un ejemplo en js puro.

http://www.javascripttoolbox.com/lib/dynamicoptionlist/examples.php

Espero que te sirva, cualquier cosa estaré por aquí ;)

0

Debieras utilizar el evento 'change' y una vez obtenido el valor, ocultar el select y mostrar el otro formulario (podés tener un section por cada opción de select, y mostrar según se elija, no siempre es lo ideal pero es lo más simple). Algo así, no testeado.

    const selectElement = document.querySelector('.select > select');

    selectElement.addEventListener('change', (event) => {
        const elegido = event.target.value;
        if(elegido == 'A') {
          // codigo para ocultar el select y mostrar el formulario con valores para A
        } else if(elegido == 'B') {
          // codigo para ocultar el select y mostrar el formulario con valores para B
        }
        // etc.
    });
-1

Puedes utilizar CCS te dejo un ejemplo completo, aun que podría ayudar poniendo lo que ya tienes en pantalla.

<html>
    <head>
        <title>Menu Desplegable</title>
        <style type="text/css">

            * {
                margin:0px;
                padding:0px;
            }

            #header {
                margin:auto;
                width:500px;
                font-family:Arial, Helvetica, sans-serif;
            }

            ul, ol {
                list-style:none;
            }

            .nav > li {
                float:left;
            }

            .nav li a {
                background-color:#000;
                color:#fff;
                text-decoration:none;
                padding:10px 12px;
                display:block;
            }

            .nav li a:hover {
                background-color:#434343;
            }

            .nav li ul {
                display:none;
                position:absolute;
                min-width:140px;
            }

            .nav li:hover > ul {
                display:block;
            }

            .nav li ul li {
                position:relative;
            }

            .nav li ul li ul {
                right:-140px;
                top:0px;
            }

        </style>
    </head>
    <body>
        <div id="header">
            <ul class="nav">
                <li><a href="">Inicio</a></li>
                <li><a href="">Servicios</a>
                    <ul>
                        <li><a href="">Submenu1</a></li>
                        <li><a href="">Submenu2</a></li>
                        <li><a href="">Submenu3</a></li>
                        <li><a href="">Submenu4</a>
                            <ul>
                                <li><a href="">Submenu1</a></li>
                                <li><a href="">Submenu2</a></li>
                                <li><a href="">Submenu3</a></li>
                                <li><a href="">Submenu4</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="">Acerca de</a>
                    <ul>
                        <li><a href="">Submenu1</a></li>
                        <li><a href="">Submenu2</a></li>
                        <li><a href="">Submenu3</a></li>
                        <li><a href="">Submenu4</a></li>
                    </ul>
                </li>
                <li><a href="">Contacto</a></li>
            </ul>
        </div>
    </body>
</html>
4
  • 2
    Este código no tiene que ver nada con la pregunta ni con el código compartido en la misma.
    – Alvaro Montoro
    Commented el 17 dic. 2016 a las 5:22
  • 2
    Aparte de eso, ¿eres el autor del código mostrado arriba? Porque se puede encontrar un código idéntico palabra por palabra en otros sitios online. Si no lo eres, te recomiendo que te pases por el Centro de Ayuda y leas ¿Cómo referir material a otros?
    – Alvaro Montoro
    Commented el 17 dic. 2016 a las 5:31
  • Alvaro Montoro pueda ser que tengas razón, siempre pruebo que funcione lo que comparto, por eso mencione una forma que podría servirle, por eso comente si tenia algo mas visual que fuera de mas ayuda, y gracias por lo de referir el material a otros.
    – SoftMolina
    Commented el 21 dic. 2016 a las 18:13
  • @SoftMolina Siempre puedes añadir toda la información en el botón de editar justo debajo de la respuesta. Commented el 30 dic. 2016 a las 15:26

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.