Home/ Questions/Q 8876165
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T19:08:41+00:00

I have this javascript switch statement: function showSideMenu() { switch (document.forms[culinaryrequest].culinarytype.selectedIndex) { case 0:

  • 0

I have this javascript switch statement:

function showSideMenu() {
            switch (document.forms["culinaryrequest"].culinarytype.selectedIndex) {
                case 0:
                    document.getElementById('case1').style.display="none";
                    document.getElementById('case2').style.display="none";
                    document.getElementById('case3').style.display="none";
                    document.getElementById('case4').style.display="none";
                    break;
                case 1:
                    document.getElementById('case1').style.display="table-row";
                    document.getElementById('case2').style.display="none";
                    document.getElementById('case3').style.display="none";
                    document.getElementById('case4').style.display="none";
                    break;
                case 2:
                    document.getElementById('case1').style.display="none";
                    document.getElementById('case2').style.display="table-row";
                    document.getElementById('case3').style.display="none";
                    document.getElementById('case4').style.display="none";
                    break;
                case 3:
                    document.getElementById('case1').style.display="none";
                    document.getElementById('case2').style.display="none";
                    document.getElementById('case3').style.display="table-row";
                    document.getElementById('case4').style.display="none";
                    break;
                case 4:
                    document.getElementById('case1').style.display="none";
                    document.getElementById('case2').style.display="none";
                    document.getElementById('case3').style.display="none";
                    document.getElementById('case4').style.display="table";
                    break;
                default:
                    break;
            }
        }

When a user chooses one of the options from a dropdown menu, it displays a certain element controlled by the above switch statement. The problem is upon refresh or if the user gets an error and is taken back to the page, the element is hidden again. I want to set a cookie to keep the element showing, but I’m not sure how to add cookies to a switch statement. Can I get an example? Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You could use a framework to do the job.

    <html>
    <head>
        <title></title>
        <style type="text/css">
            div.case{
                display: none;
            }
        </style>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript" src="https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js"></script>
        <script type="text/javascript">
            (function($){
                $(document).ready(function(){
                    // Define cookie key
                    var cookiekey = "mycookiekey";

                    // Get cases
                    var cases = $('div.case').hide();

                    // Set handler
                    var handler = $('#culinarytype');

                    // Show case based on cookie
                    handler.val($.cookie(cookiekey));

                    // Define the select function
                    var selectFromHandler = function(){
                        selected = handler.val();

                        // First hide all cases
                        cases.hide();

                        // Show only wanted case
                        if(selected > 0){
                            $(cases.get(selected - 1)).show();
                        }

                        // Set cookie
                        $.cookie(cookiekey, selected, { expires: 7 });
                    }

                    // Based on handler change
                    handler.change(selectFromHandler);

                    // Default
                    selectFromHandler();
                });
            })(jQuery);
        </script>
    </head>
    <body>
        <select id="culinarytype">
            <option value="0"></option>
            <option value="1">Case 1</option>
            <option value="2">Case 2</option>
            <option value="3">Case 3</option>
            <option value="4">Case 4</option>
        </select>

        <div class="case">Case 1</div>
        <div class="case">Case 2</div>
        <div class="case">Case 3</div>
        <div class="case">Case 4</div>
    </body>
</html>
    • 0