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>

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!