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.
JavaScript
x
const $selectElement = $('#select');
$selectElement.on('change', () => {
$('form').css('display', 'none');
$(`[data-id="${$selectElement.val()}"]`).css('display', 'block');
});
JavaScript
form {
display: none;
}
JavaScript
<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>