Question

Hi I write some code to hide and show some based on the selected dropdown option. Here are my codes:

(function ($){$(document).ready(function() {
    $( '#Drodown_id' ).change(function(){       
        switch ($(this).val()) {
        case "option_1" :
          $("#div1").show();
          $('#div2').hide();
          break;
        case "option_2":
          $("#"div2").show();
          $("#div1").hide();
          break;
        case "option_3":
          $("#"div2").show();
          $("#div1").show);
          break;
        case "":
          $("#div1").hide();
          $("#div2").hide();
          break;
         }
      }); });})(jQuery);

However, every time I open/refresh the page, both div1 and div2 will showed up, regardless the selected option is option_1, option_2 and even null. The problem only occurred when the page is new/refresh.

Is there any problem on my codes??

Answer 1

Firstly there are several extra double quotes in your code which would prevent it from working. Secondly, you have only told this code to execute when the select is changed. Try this:

$(document).ready(function() {
    setOptions(); // on load
    $('#Drodown_id').change(setOptions); // on change

    function setOptions() {       
        switch ($("#Drodown_id").val()) {
            case "option_1" :
                $("#div1").show();
                $('#div2').hide();
                break;
            case "option_2":
                $("#div1").hide();
                $("#div2").show();
                break;
            case "option_3":
                $("#div1").show();
                $("#div2").show();
                break;
            case "":
                $("#div1").hide();
                $("#div2").hide();
                break;
            }
    }); 
})