Обработка выбора элемента списка
 

Есть сайт https://zakrepi.ru/categories/instrument-rybolova? на открывающейся странице есть список "Показывать по". Когда на форме мышкой изменяю значение страница обновляется и количество товара меняется. Но! нигде ни могу найти какая функция при этом вызывается и как вообще они это сделали если <select> не запечатан в <form>.

Нужно скриптом (он будет подставлен перед </body>) изменить количество отображаемого товара на странице.

На данный момент перепробовал функции имитации нажатия мышкой: https://askdev.ru/q/kak-imitirovat-s...ascript-19669/
принудительно устанавливая значение в списке перед вызовом функции имитации нажатия мышкой. Ничего не получилось.

Могли просто использовать событие change на этом select...

Они могли бы так сделать? или я могу это изменить?
Дело в том, что я уже 2-й день парюсь и не могу понять как они вообще это сделали!? Где та функция которую они вызывают? Если найду функцию, то вызвать ее из скрипта проблем не будет!

НЕТ! Не получается. Значение в списке меняется (и 24 и 36 ставится), а количество отображаемого товара остается "по умолчанию" 12.

Igal,
браузер какой?

Crom

Chrome

Подождите, я не прав! Загружаю текст страницы в 1С, добавляю скрипт, отправляю на формирование DOM дерева. А 1С, по описанию работает на IE, вот только какой версии не известно.

Igal,
как вариант ...

var event = document.createEvent("Event");
      event.initEvent("change", true, true);
      var select = document.querySelector('[data-set-pagination]');
      select.value = 24;
      select.dispatchEvent(event);

В браузере смотрел?
Есть ли какие-то обработчики на select?

Проверил. Результат тот же.

Искал по все возможным контекстам. Текст вручную приводил в порядок. Вытащил тексты всех скриптов отдельно. Перечитал как работать со списками. Я, в принципе понять не могу как можно обработать изменение на форме, если нет <form> и из <select> или <option> действие не назначено.

Igal, JS событийный язык... Должно быть какое-то событие. Именно на него и реагируют, меняя количество элементов на странице.

Абсолютно согласен. Я по тому и обращаюсь к гуру, что у меня мысли закончились - все до чего свои мозги дотянулись перебрал. Если можете посмотреть, адрес страницы в начале темы (это сайт магазина в Тюмени).

Неее. Я на сторонние ресурсы не хожу. :)

Там все события привязаны к body и какому то родительскому div.
Сделано судя по всему так. Там нет реакции именно на change для этого select.
Есть реакция на любой change для всех select, есть реакция на input для всех инпутов. Потом идет ajax запрос со всеми параметрами и возвращается html текст, который вставляется в соответствующий div
В этом html все - и левая колонка, и селекты для сортировки и количества и сами товары.
Возвращается <div class="grid-container">.... </div>
Обращение к серверу идет из app.js. Но он минимизирован - сказать откуда точно - не могу

Можно зайти через 2gis Тюмень, компания называется "крепыж сеть магазинов". 2Gis точно безопасен.
Проблема оказалась в браузере! Через манифест хрома проверил варианты. Выкладываю те которые отработались.

Сам манифест:
{
"manifest_version": 3
,"name": "Pars"
,"short_name": "Pars"
,"version": "1.0"

,"content_scripts": [
{"matches": ["https://zakrepi.ru/*"],"js": [ "zakrepi.js" ]}
]
}

Файл zakrepi.js
Вариант 1:
var lv_sort=document.querySelector("nav.sort-wrap");
if (lv_sort!=null) { // Если нужный нам узел есть
const lv_event = new Event('change', {bubbles: true}), lv_select = document.querySelector('[data-set-pagination]');
lv_select.value = 24;
lv_select.dispatchEvent(lv_event);
}

Вариант 2:
var lv_event = document.createEvent('Event');
lv_event.initEvent('change', true, true);
var lv_select = lv_sort.querySelector('[data-set-pagination]');
lv_select.value = 36;
lv_select.dispatchEvent(lv_event);


Огромное человеческое спасибо Рони