这里是一个工作代码显示的破坏者，直到最后一本书的选择
这将坚持选择和选择的顺序

$(function() {
  const $spoiler = $('.spoiler').hide();
  const spoilers = $('#spoilerSelect option').map(function() {
    return +this.value.split('-').pop(); // get the int of the option value
  }).get() // get the list
  $('#book-1').show();
  $('#spoilerSelect').on("change", function() {
    $spoiler.hide();
    const idx = this.selectedIndex;
    const last = spoilers[idx]; // get last book 
    $spoiler.each(function() {
      const divIdx = +this.id.split("-").pop(); // get the int of the div
      $(this).toggle(divIdx <= last)
    })
  })
});

个字符
这里是一个prevAll版本-它需要$.escapeSelector，因为句号和addBack选择的基础，为所有

$(function() {
  const $spoiler = $('.spoiler').hide();
  $('#book-1').show();
  $('#spoilerSelect').on("change", function() {
    $spoiler.hide();
    $(`#${$.escapeSelector(this.value)}`)
      .prevAll() // previous siblings
      .addBack() // and itself
      .show()
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<select id="spoilerSelect">
  <option value="book-1">Book One</option>
  <option value="book-2">Book Two</option>
  <option value="book-3">Book Three</option>
  <option value="book-3.5">Book Three.Five</option>
  <option value="book-4">Book 4</option>
  <option value="book-4.5">Book Four.Five</option>
  <option value="book-5">Book 5</option>
  <option value="book-6">Book 6</option>
</select>

<div id="book-1" class="spoiler">
  Book One
</div>

<div id="book-2" class="spoiler">
  Book Two
</div>
<div id="book-3" class="spoiler">
  Book Three
</div>
<div id="book-3.5" class="spoiler">
  Book Three.Five
</div>
<div id="book-4" class="spoiler">
  Book Four
</div>
<div id="book-4.5" class="spoiler">
  Book Four.Five
</div>

<div id="book-5" class="spoiler">
  Book Five
</div>

<div id="book-6" class="spoiler">
  Book 6
</div>

的字符串