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 wele 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>

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 wele 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()
                );
            });

• javascript
• jquery

• ` BUT the update isn't triggered` - what you mean by that? What is the (js) part which is loading your page? – Sysix Commented Nov 25, 2020 at 19:18
• It doesn't look like you are using the page besides to just select it in the drop down. In order to advance to that page, you will need two parts: First, each page will need some kind of identifier wrapping the content like a div or something and the second part will be the javascript that will be used to go to that page. You haven't provided any code or reference to how the pages are actually structured in the HTML. – imvain2 Commented Nov 25, 2020 at 19:19
• I was trying to simplify because it's in Drupal so there is a lot of php and js. You can see a demo of the issue here: diglib.amphilsoc/islandora/object/tunicanotebook01-test - if you click links, dropdown pager advances but pages don't. If you mouseclick on pager both advance. – user7868324 Commented Nov 25, 2020 at 21:11

3 Answers 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>

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>

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 () { ....