title: Set select option by index
body: <p>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).</p>
  <p>I welcome a way to make the javascript change trigger or a jquery solution. Thanks!</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function selectOption(index) {
    document.getElementById("tei_pager").options.selectedIndex = index;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select id="tei_pager" class="form-select"&gt;
    &lt;option value="10917"&gt;1&lt;/option&gt;
    &lt;option value="10918"&gt;2&lt;/option&gt;
    &lt;option value="10919"&gt;3&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;a href="javascript:void(0);" onclick="selectOption(1);"&gt;Second Page&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>and this section of a separate jquery is binding the select</p>
  <pre><code> // Bind page changes to the select.
              $(&quot;#tei_pager&quot;).change(function () {
                  Drupal.settings.islandora_paged_tei_seadragon_update_page(
                      $(this).val(),
                      $(this).children(&quot;option:selected&quot;).text()
                  );
              });
  </code></pre>