Обращение к спойлеру через select

.horizontal-click [name="vkl"] { display: none; }
.horizontal-click > :not(input):not(label) {
  overflow: hidden;
  height: 0;
  margin: 0;
  padding: 0 .5em;
  <!-- border: 1px solid #808080; -->
  border-top-style: none;
  transition: .5s;
}
.horizontal-click > label {
  overflow: hidden;
  display: block;
  padding: .7em 1em;
  background: #564BF4;
  color: rgb(255, 255, 255);
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
  border: 4px solid white;
}
.horizontal-click > :checked + label + * {
  overflow: auto;
  height: 250px;
}
.horizontal-click > :checked + label {
  background: #F40000;
  cursor: default;
}

<input type="checkbox" name="vkl" id="vkl14"/><label for="vkl14">спойлер</label>
    <p>текст</p>

$(function () {
      $('a[href*=#]:not([href=#])').click(function () {
          if (location.pathname.replace(/^//, '') == this.pathname.replace(/^//, '') && location.hostname == this.hostname) {
              var target = $(this.hash);
              target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
              if (target.length) {
                  $('html,body').animate({
                      scrollTop: target.offset().top
                  }, 1000);
                  return false;
              }
          }
      });

<select onchange="window.location.href=this.options[this.selectedIndex].value">
    <option VALUE=""></option>
    <option VALUE="#b1">1</option>
    <option VALUE="#b2">2</option>
    <option VALUE="#b3">3</option>
</select>