• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

91
Views
Mostrar/ocultar múltiples formularios según el menú desplegable sin declaraciones condicionales

Necesito mostrar/ocultar tres formularios según la opción desplegable seleccionada sin usar declaraciones condicionales. ¿Es posible?

almost 3 years ago · Juan Pablo Isaza
2 answers
Answer question

0

Puede hacerlo así, consulte con: https://api.jquery.com/on/

La idea es aplicar un detector de eventos para cada opción seleccionada.

 const $selectElement = $('#select'); $selectElement.on('change', () => { $('form').css('display', 'none'); $(`[data-id="${$selectElement.val()}"]`).css('display', 'block'); });
 form { display: none; }
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="select"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <form data-id="1"> <span>1</span> </form> <form data-id="2"> <span>2</span> </form> <form data-id="3"> <span>3</span> </form>

almost 3 years ago · Juan Pablo Isaza Report

0

Sí. Simplemente usaría un mapa y haría algo como esto (¡NO PROBADO!):

 const myDropdown = document.querySelector("#myDropdown"); const resetVisibilityOfForms = () => Object.keys(formMap).forEach(form => document.querySelector(form).style.visibility = 'hidden'); const formMap = { 'default': () => resetVisibilityOfForms(), 'formId1': () => resetVisibilityOfForms() && document.querySelector('myForm1').style.visibility = 'visible', 'formId2': () => resetVisibilityOfForms() && document.querySelector('myForm2').style.visibility = 'visible' }; myDropdown.onchange = (e) => { const selectedForm = myDropdown.options[myDropdown.selectedIndex].value; formMap[selectedForm](); }; // just hide all the forms by default... resetVisibilityOfForms();

Esto funcionaría con HTML como el siguiente:

 <form id="formId1">....</form> <form id="formId2">....</form> <select id="myDropdown"> <option value="default">Choose a form</option> <option value="formId1">Form 1</option> <option value="formId2">Form 2</option> </select>

También hay muchas formas de mejorar el código anterior. Puede simplificar el mapa, crear un tipo diferente de mapa, usar una matriz o cualquier número de otros enfoques diferentes. Sin embargo, el punto no es crear un ejemplo listo para producción para lo anterior, solo crear un ejemplo para darle algunas ideas de cómo hacerlo.

¡Buena suerte!

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error