переход на другую страницу по клику в select

Question

коллеги, прошу помоч решить одну задачу.

У меня два селекта со списком страницы\группы. Пользователь может выбрать любую страницу\группу и при этом должны генерироваться новые данные с бэка. при настоящем коде выходит ошибка 404. Как решить это? Vanilla JS

const pageValue  = document.querySelector('.page').value;
const groupValue = document.querySelector('.group').value;

function change () {
    this.options = pageValue;
};//пытаюсь переключать стараницы\группы

async function getData (){
    const url = `${backData}page=${pageValue}&group=${groupValue}`;//по дефолту 0\0 и работает
    const res = await fetch(url);
    const data = await res.json();
    return data;
}//получение данных

<form class="group-page">
            <select name="levels" class="group" onchange="change()">
                <option value="0">1</option>
                <option value="1">2</option>
                <option value="2">3</option>
            </select>
            <select name="page" class="page" onchange="change()">
                <option value="0">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
</select>

Спасибо

Answer 1

Если я правильно понимаю, тут нужно учесть такие моменты.

this.options — это коллекция элементов option и она только для чтения. Поэтому от присваивания ей каких-то значений ничего не изменится.
Вы используете переменные pageValue и groupValue в создании адреса, но присваиваете им значения только один раз при загрузке страницы и больше не обновляете (и не сможете это сделать, пока они объявлены как const).

Если вы хотите, чтобы эти компоненты адреса синхронизировались с состоянием списка, нужно обновлять их внутри обработчика события. Что-то вроде этого:

let pageValue  = document.querySelector('.page').value;
let groupValue = document.querySelector('.group').value;

function change (element) {
    if (element.name === 'levels') groupValue = element.value;
    else if (element.name === 'page') pageValue = element.value;
};

<select name="levels" class="group" onchange="change(this)">
<select name="page" class="page" onchange="change(this)">

БЛОГ НА HUSL

переход на другую страницу по клику в select

Ответы (1 шт):