选择下拉选项值在更改之前不会受到影响答案

【问题标题】：Select dropdown option value not getting affected until it changes选择下拉选项值在更改之前不会受到影响
【发布时间】：2021-02-04 14:44:38
【问题描述】：

我有这个选择下拉列表。当每年根据班级选择div时，将显示其他的将被隐藏。很直接。但问题是，在页面加载时，它首先显示所有 div，直到我将选择更改为 2021。它应该首先显示 2020 div，因为它是 selected 值。这是我的代码。

$(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/bootstrap@4.5.3/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/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

这是我研究过的解决方案，但问题似乎仍然存在。

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

如果有人知道更好的解决方案或我犯的任何错误，请帮助我。非常感激。谢谢

【问题讨论】：

标签： javascript html jquery css

【解决方案1】：

您可以在页面加载时调用您的更改事件。另外，我已经使用.not() 方法修改了您的代码。

演示代码：

$(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/bootstrap@4.5.3/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>

【讨论】：

这确实很有帮助，但它搞砸了我光滑的滑块设计，代码实际上是为了隐藏幻灯片，所以我尝试了另一个代码并成功了。你的回答让我明白了。感谢您的支持。

【解决方案2】：

我发现这段代码很有帮助。感谢您的帮助，您的回答对找到这个新代码很有帮助

$(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/bootstrap@4.5.3/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>

【讨论】：