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

You can set the value of the select tag.

 function selectOption(val) { document.getElementById("tei_pager").value = val; }

 <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('10918');">Second Page</a>

Answer 2

If the change event of the select element is to trigger the Drupal code you have at the end of your question,

then change:

$("#islandora_paged_tei_seadragon_pager").change(function () { ....

to :

$("#tei_pager").change(function () { ....

UPDATE

If by ....dynamically generated dropdown select.... you mean to say that the select element is created after DOM ready event, then consider re-writing it as follows:

$(document).on('change', '#tei_pager', function () { ....

Answer 3

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>