'Hide and show element and stay with the same option selected

i have this code

if checkbox is checked i need to show my front_dashboard_custom_formula div and hide front_dashboard_formula_formula_id and set select null if checkbox is not checked i need to hide

javascript jquery

Solution 1:^[1]

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
<input type="checkbox">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
    $("input[type=checkbox]").on("click", function(e){
        console.log(this.checked ? "show" : "hide")
    })
</script>
</body>
</html>

Solution 2:^[2]

What a weirdly worded question. Here's an answer.

<div id="div1" style="display: none">front_dashboard_custom_formula</div>
<div id="div2">front_dashboard_formula_formula_id</div>

<input type="checkbox" />
<select>
    <option value="option1">option1</option>
    <option value="option2">option2</option>
</select>

<script>
    const div1 = document.querySelector('#div1');
    const div2 = document.querySelector('#div2');
    const checkbox = document.querySelector('input');
    const select = document.querySelector('select');

    const show = (element) => (element.style.display = 'none');
    const hide = (element) => (element.style.display = 'block');

    const handleCheckboxChange = () => {
        if (checkbox.checked) {
            show(div1);
            hide(div2);
            return;
        }

        show(div2);
        hide(div1);
    };

    checkbox.addEventListener('change', handleCheckboxChange);
</script>

Solution 3:^[3]

if u want to keep option selected just add this

select.attr('selected',true);

i hope it was useful !

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	i like Cola
Solution 2	mstephen19
Solution 3	Joukhar

'Hide and show element and stay with the same option selected

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]