0

Estoy trabajando en un nodo de node-red y me gustaría saber cómo puedo hacer para que al seleccionar un elemento del select, por ejemplo "Range of days", y que abajo se me muestre solo el div que me engloba a ese input:

introducir la descripción de la imagen aquí

Adjunto mi html:

<i class="fa fa-calendar"></i>
    <select class="form-select" aria-label="Default select example">
        <option selected> Choose one: </option>
        <option value="day">Day</option>
        <option value="range">Range of days</option>
        <option value="week">Week</option>
        <option value="month">Month</option>
      </select>


    <div class="container">
        <i class="fa fa-calendar"></i> Choose a day:
        <input id="node-input-calendar" type="date" name="calendar" style="width: 30%;">
        <label for="calendar"></label>
    </div>

    <br>

    <div class="container">
        <i class="fa fa-calendar"></i> Choose a range of days:
        <input id="node-input-calendarRange" type="date" name="calendar" style="width: 30%;"> to <input id="node-input-calendarRangeTwo" type="date" name="calendar" style="width: 30%;">
        <label for="calendarRange"></label>
    </div>

    <br>

    <div class="container">
        <i class="fa fa-calendar"></i> Choose a week:
        <input id="node-input-week" type="week" name="calendar" style="width: 35%;">
        <label for="week"></label>
    </div>

    <br>

    <div class="container">
        <i class="fa fa-calendar"></i> Choose a month:
        <input id="node-input-month" type="month" name="calendar" style="width: 35%;">
        <label for="calendar"></label>
    </div>

Disculpad si hay errores, muchas gracias.

2
  • Estaría faltando el código Javascript que has intentado. ¿Podrías editar tu pregunta y agregarlo?
    – Marcos
    Commented el 29 abr. 2021 a las 15:31
  • Buenas Marcos, de momento no había añadido js, porque no sabía cual era la forma más eficiente de hacer esto que pido. Un saludo!
    – Andrés
    Commented el 29 abr. 2021 a las 15:37

1 respuesta 1

1

Una forma sencilla de hacerlo es con JavaScript, también el atributo id en tus elementos select y div contenedores de cada sección.

Para el caso del select puede ser:

<select class="form-select" id="dates" aria-label="Default select example">

Para cada div además de la clase contenedor:

<div class="container" id="range">

Adicional antes de cerrar la etiqueta body agregas el código JS, ten en cuenta que todos los elementos con la clase container se ocultarán al seleccionar una opción, por lo que si tienes más elementos que no tienen que ver con esta funcionalidad, debes agregar una clase adicional a cada div que quieras que se oculte.

<script>
    const selectElement = document.querySelector('#dates');
    
    selectElement.addEventListener('change', (event) => {

        var x = document.getElementsByClassName('container');
        for (var i = 0; i < x.length; i++) {
            x[i].style.display= "none";
        }

        document.querySelector("#"+event.target.value).style.display = 'block';
    });

</script>

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.