Set select option by index

Question

I have a dynamically generated dropdown select feature that numerically pages through a book. I wish to create a table of content feature that allows users to click a link to jump to pages within the book. I've implemented a vanilla javascript solution (see below) that selects by index BUT the update isn't triggered (page number changes in the pager but it doesn't advance the page).

I welcome a way to make the javascript change trigger or a jquery solution. Thanks!

function selectOption(index) {
  document.getElementById("tei_pager").options.selectedIndex = index;
}

<select id="tei_pager" class="form-select">
  <option value="10917">1</option>
  <option value="10918">2</option>
  <option value="10919">3</option>
</select>

<a href="javascript:void(0);" onclick="selectOption(1);">Second Page</a>

and this section of a separate jquery is binding the select

 // Bind page changes to the select.
            $("#tei_pager").change(function () {
                Drupal.settings.islandora_paged_tei_seadragon_update_page(
                    $(this).val(),
                    $(this).children("option:selected").text()
                );
            });

Answer 1

I adapted a solution from here: Change <select>'s option and trigger events with JavaScript Having the selection made by js rather than a mouseclick was inhibiting the process.

My solution looks like:

js

function selectOption(index){
  if (index == 0) { 
  document.getElementById("tei_pager").options.selectedIndex = index;
  }
  else {
  document.getElementById("tei_pager").options.selectedIndex = (index - 1);
  }
  if ("createEvent" in document) {
        var evt = document.createEvent("HTMLEvents");
        evt.initEvent("change", false, true);
        document.getElementById("tei_pager").dispatchEvent(evt);
    }
    else {
        document.getElementById("tei_pager").fireEvent("onchange");
    }
}

html

<select id="tei_pager" class="form-select">
<option value="10917" selected="selected">1</option>
<option value="10918">2</option>
<option value="10919">3</option>
<option value="10920">4</option>
<option value="10921">5</option>
<option value="11192">6</option>
<option value="11193">7</option>
</select>
<a href="javascript:void(0);" onclick="selectOption(0);">First Page</a>
<a href="javascript:void(0);" onclick="selectOption(6);">Sixth Page</a>