Select dropdown option value not getting affected until it changes

Question

I have this Select dropdown with years. When each year selected the div according to the class will show and others will be hidden. Pretty straight forward. But the issue is, on page load it shows all divs first until I change the selection to 2021. It should show 2020 div first only since it is the selected value. Here is my code.

$(document).ready(function () {
        $('#event-slider').on('change', function () {
            if (this.value == '2020') {
                $(".2020").show();
                      $(".2021").hide();
            } else {
                $(".2020").hide();
            }
            if (this.value == '2021') {
                $(".2021").show();
                      $(".2020").hide();
            } else {
                $(".2021").hide();
            }
        });
    });



    
      
    


Year 2020
Year 2021

This is the solution I've worked on but seems the problem still exists.

$('select[id^="event-slider"] option[value="2021"]').attr("selected","selected");

If anyone knows a better solution or any mistake I've done please help me. Much appreciated. Thank you

user_10606400 · Answer

You can call your change event on page load . Also , i have modified your code using .not() method.

Demo Code :

$(document).ready(function() {
  $('#event-slider').on('change', function() {
    var selector = "." + this.value
    $(selector).show(); //show div 
    $("div").not($(selector)).hide() //hide other
  });

  $('#event-slider').trigger('change') //call on load
})




  




  Year 2020


  Year 2021

user_12330664 · Answer

I found this code helpful. Thank you for helping your answer was really helpful to find this new code

$(document).ready(function () {
        $("#event-slider").change(function () {
            $(this).find("option:selected").each(function () {
                var optionValue = $(this).attr("value");
                if (optionValue) {
                    $(".year").not("." + optionValue).hide();
                    $("." + optionValue).show();
                } else {
                    $(".year").hide();
                }
            });
        }).change();
    });




  




  Year 2020


  Year 2021

Select dropdown option value not getting affected until it changes

2 Answers