Как перекинуть работу сервера на пользовательскую часть?

Question

[Павел]

Есть у меня форма, выбор значения

<select class="one" name="text">
        <option value="0">нет</option>
        <?php
        while ($user2 = $stmt2->fetch(PDO::FETCH_ASSOC))
            echo "<option value=\"{$user2['id']}\">{$user2['pred']}</option>";
        ?>
    </select>

в зависимости от того что тут выберем , value идет через ajax на сервер , с сервера
SELECT * FROM objects WHERE parent_id = $name
где $name это значения из value , так вот таким макаром мы делаем много запросов к базе , а по сути это одна таблица, она маленькая , а каждый раз ждать пока сервер вернет ответ для заполнения таких селектов очень долго , особенно если медленный интернет.

И тут у меня родилась идея, может выбрать сразу всю таблицу из БД и просто использовать те значения которые мне нужны? Только я не могу представить как это должно работать на js/jquery , кто на пальцах логику обьяснит?

Берем первый select val например там "2" , значит берем из выбранной таблицы все параметры где parent_id= 2 и вставляем их во второй select

Answer 1

[Александр Талалаев]

В вашем случае, чтобы не погружаться во все эти состояния приложений и новый фронтенд с реактивными компонентами, легче всего будет использовать DataTable библиотека для Jquery с крайне широким функционалом по фильтрации таблиц, в том числе с работой только на клиенте с полностью загруженными данными изначально.
Библиотека не сложная, почитайте документацию, поиграйтесь на сайте с примерами я думаю вы быстро решите вашу задачу.

Comments

[Павел]

я использую datatable уже на этом сайте, только немного не понял как это связать, по моему это тот вариант когда проще будет написать свой велосипед)

[Александр Талалаев]

mrusklon, зачем свои велосипеды с бесконечными подводными камнями в изменяющихся условиях. Уже есть удобное решение. Вам только назначить на селект слежку за изменением( .on( 'change',...) ) и все. Вот даже в примерах есть.
Короче говоря советую не мудрить и брать готовое решение с хорошей оптимизацией.

Answer 2

[grinat]

json_encode("SELECT * FROM objects WHERE parent_id = $name")
на фронте JSON.parse()

Comments

[Павел]

допустим я получил всю таблицу в json формате , а дальше? Теорию просто подскажите , я нагуглю

[grinat]

mrusklon, дальше addEventListener change на селект, и получаем выбранный элемент в select, вытаскиваем из json все children, далее быстрее всего будет сделать строку с option для второго селекта и document.getElemntById('nextSelect').innerHTML = '<option>Child 1</option><option>Child 2</option>'

Можно и без js, полностью на php строить, есть такой атрибут в html 5 - htmlbook.ru/html/optgroup