CODEWITHSUNDEEP
javascripthtmljquerycss
Arshad Arsal
Arshad Arsal

Reputation: 115

Select dropdown option value not getting affected until it changes

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();
            }
        });
    });
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

    <form class="needs-validation" novalidate autocomplete="off">
      <select class="custom-select" id="event-slider">
      <option value="2020" selected>2020</option>
      <option value="2021">2021</option>
      </select>
    </form>


<div class="2020"><p>Year 2020</p></div>
<div class="2021"><p>Year 2021</p></div>

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

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

Upvotes: 2

Views: 43

Answers (2)

Arshad Arsal
Arshad Arsal

Reputation: 115

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();
    });
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<form class="needs-validation" novalidate autocomplete="off">
  <select class="custom-select" id="event-slider">
    <option value="2020" selected>2020</option>
    <option value="2021">2021</option>
  </select>
</form>


<div class="year 2020">
  <p>Year 2020</p>
</div>
<div class="year 2021">
  <p>Year 2021</p>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>

Upvotes: 0

Swati
Swati

Reputation: 28522

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
})
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<form class="needs-validation" novalidate autocomplete="off">
  <select class="custom-select" id="event-slider">
    <option value="2020" selected>2020</option>
    <option value="2021">2021</option>
  </select>
</form>


<div class="2020">
  <p>Year 2020</p>
</div>
<div class="2021">
  <p>Year 2021</p>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>

Upvotes: 1

Related Questions