jquery - 根据选择隐藏元素但加载值

Question

我有这样的设置:

<select id="status" name="status">
  <option value="1" selected="selected">1</option>
  <option value="2">2</option>
</select>

<div id="additional_information" class="hidden">
  Additional information
</div>

<小时/>

var val = $("#status option:selected").val();

if (val == '1') {
  $('#additional_information').removeClass('hidden');
} else {
  $('#additional_information').addClass('hidden');
}

当页面打开时，jQuery 读取该值并显示或隐藏隐藏的 div。 但如果我更改选择选项，它就不会再得到更改。

如何使其工作，以便在页面加载时加载值，然后每次用户在 select 中选择选项时相应地更改它？

<强> JSFIDDLE Example

Answer 1

这里我使用了change事件并触发了它的onload

使用 toggleClass 简化了代码

$(function() {
  $("#status").on("change", function() {
    // hide if this.value == 2 or use !=1 if there are more than 2 options
    $('#additional_information').toggleClass('hidden', this.value == 2); 
  }).change(); // trigger to hide or show on load
})

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="status" name="status">
  <option value="1" selected="selected">1</option>
  <option value="2">2</option>
</select>

<div id="additional_information" class="hidden">
  Additional information
</div>