I need to show/hide three forms depending on dropdown selected option without using conditional statements. Is it possible?
Advertisement
Answer
You can do it like so, please reference with: https://api.jquery.com/on/
The idea is to apply event listener for each select option.
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>