0

Помогите, пожалуйста.

Я перелопатил огромное количество поисковиков в том числе на английском языке, нигде не нашел конкретного и понятного описания про то, как выстроить Ajax зависимые списки select везде примеры что находил писали люди которые вообще не понимают программирования и полотна кода, хотя объективно понимаю что там код в 15-20 строчек.

Здесь я точно знаю найдутся профи кто подробно сможет используя мой код показать не только мне, но и тем кто когда-либо столкнется с такой же проблемой найдя этот вопрос. На SO также видел подобные запросы, но у них другие были поставлены задачи, разобраться не смог.

Таблица mark имеет id и title (названия марок) Таблица model имеет id, mark_id (сопоставление с марками из таблицы mark) и title (названия моделей)

В RedBean вставляю такой код, он в select выводит все марки, модели загружаться не хотят, список моделей просто пропадает, исчезает даже надпись "Выберите модель".

$marks = R::findAll('mark', 'ORDER BY title ASC');    
        $model = R::findAll('model', 'ORDER BY title ASC');

PHP.

<form class="FastSearch" id="search" action="search.php">

<h3>Марка</h3>
                <label>
                    <select id="mark" class="select2" name="mark">
                        <option value="0" selected>Все марки</option>
                        <?php if (isset($marks)): ?>
                            <?php foreach ($marks as $mark): ?>
                                <option value="<?=$mark['id']; ?>"><?=$mark['title']; ?></option>
                            <?php endforeach; ?>
                        <?php endif; ?>
                    </select>
                </label>
            </div>

            <!--Модель-->

            <div class="FullModel">
                <h3>Модель</h3>
                <label>
                    <select id="model" class="select2" name="model">
                        <option value="0" disabled selected>Выберите модель</option>
                    </select>
                </label>

</form>

JavaScript.

function getModel(parent, mark, model, create=0) {
        $(parent).on('change',mark, function () {
            var mark_id = $(mark).val();
            $.ajax({
                url: '/',
                data: {
                    mark_id: mark_id,
                    create: create,
                },

                type: 'POST',
                dataType: 'json',
                success: function (res) {
                    if (res) {
                        $(model).empty().html(res)
                    } else {
                        $(model).empty().html('<option>Нет моделей</option>')
                    }
                },
                error: function () {
                    alert('Ошибка');
                }
            });
        });
    }


    getModel('#search', '#mark', '#model');

Страница исполнения скрипта https://website.com/Index.php

Благодарю за помощь.

Код ошибки в консоли браузера.


[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
send @ jquery.min.js:4
jquery.min.js:4 Failed to load resource: the server responded with a status of 404 ()
send @ jquery.min.js:4
S:1 Uncaught SyntaxError: Unexpected token '<'
    at p (jquery.min.js:2)
    at Function.globalEval (jquery.min.js:2)
    at text script (jquery.min.js:4)
    at Qb (jquery.min.js:4)
    at A (jquery.min.js:4)
    at XMLHttpRequest.<anonymous> (jquery.min.js:4)
    at Object.send (jquery.min.js:4)
    at Function.ajax (jquery.min.js:4)
    at Function.r._evalUrl (jquery.min.js:4)
    at Ja (jquery.min.js:3)
VM149:24 Uncaught TypeError: Cannot read property 'addEventListener' of null
    at <anonymous>:24:39
    at p (jquery.min.js:2)
    at Function.globalEval (jquery.min.js:2)
    at text script (jquery.min.js:4)
    at Qb (jquery.min.js:4)
    at A (jquery.min.js:4)
    at XMLHttpRequest.<anonymous> (jquery.min.js:4)
    at Object.send (jquery.min.js:4)
    at Function.ajax (jquery.min.js:4)
    at Function.r._evalUrl (jquery.min.js:4)
jquery.min.js:4 Failed to load resource: the server responded with a status of 404 ()
send @ jquery.min.js:4
S:1 Uncaught SyntaxError: Unexpected token '<'
    at p (jquery.min.js:2)
    at Function.globalEval (jquery.min.js:2)
    at text script (jquery.min.js:4)
    at Qb (jquery.min.js:4)
    at A (jquery.min.js:4)
    at XMLHttpRequest.<anonymous> (jquery.min.js:4)
    at Object.send (jquery.min.js:4)
    at Function.ajax (jquery.min.js:4)
    at Function.r._evalUrl (jquery.min.js:4)
    at Ja (jquery.min.js:3)
jquery.min.js:4 Failed to load resource: the server responded with a status of 404 ()
send @ jquery.min.js:4
S:1 Uncaught SyntaxError: Unexpected token '<'
    at p (jquery.min.js:2)
    at Function.globalEval (jquery.min.js:2)
    at text script (jquery.min.js:4)
    at Qb (jquery.min.js:4)
    at A (jquery.min.js:4)
    at XMLHttpRequest.<anonymous> (jquery.min.js:4)
    at Object.send (jquery.min.js:4)
    at Function.ajax (jquery.min.js:4)
    at Function.r._evalUrl (jquery.min.js:4)
    at Ja (jquery.min.js:3)
S:203 Uncaught SyntaxError: Unexpected token '}'
    at p (jquery.min.js:2)
    at Function.globalEval (jquery.min.js:2)
    at text script (jquery.min.js:4)
    at Qb (jquery.min.js:4)
    at A (jquery.min.js:4)
    at XMLHttpRequest.<anonymous> (jquery.min.js:4)
    at Object.send (jquery.min.js:4)
    at Function.ajax (jquery.min.js:4)
    at Function.r._evalUrl (jquery.min.js:4)
    at Ja (jquery.min.js:3)
image.jpg:1 Failed to load resource: the server responded with a status of 404 ()

18
  • 3
    Где у вас элементы '#search', '#mark', '#model' в html? Где у вас отрисовка списка моделей в php? 16 окт 2020 в 4:06
  • @Stepan Kasyanenko данные пункты должны находиться не в name, а в id???
    – Vovvka
    16 окт 2020 в 13:25
  • @ Марки и модели берутся из БД. Добавил форму в select, про "отрисовку списка моделей в php" не совсем понял, что вы имели в виду?
    – Vovvka
    16 окт 2020 в 13:39
  • Ты понимаешь что значит # в селекторе #name? Или написал потому что "где-то видел"?
    – u_mulder
    16 окт 2020 в 13:39
  • @ если бы я понимал, я думаю не задавал бы вопросов, бравшись за сборку проекта по факту нужно знать HTML, CSS, JS, AJAX, PHP. с JS и ajax у меня пробелы..
    – Vovvka
    16 окт 2020 в 13:41

1 ответ 1

0
  1. не нужно тут пустой лести
  2. =>

зависимые ajax списки, на то и зависимые, что:

  • есть главный список, доступный сразу.
  • для главного списка событие onChange => получаем значение, делаем запрос на выборку второго массива, в которого родительское значение уже есть
  • для второго списка тоже вешаем событие onChange, и тоже получаем значение, и пускаем запрос со значением второго списка, с которого вы отрисуете третий

Повторить N раз для своей задачи

P.S и не забываем про вложенность(если на текущий момент у вас есть все 3 списка, и вы меняете первый) - почистите 3й и выше, которые по иерархии уже будут иметь нерелеватные значения

1
  • Никакой лести не было, тем более пустой. Был вопрос к тем, кто может подробно дать объяснение. Логику что вами описана я думаю понятна любому. Первый список у меня открывается сразу со всеми марками, далее ничего не происходит, пустое поле становится. Списка select всего 2 штуки. За совет благодарю, но приблизиться к ответу он не помог, объяснение текстом для программирования тоже самое что объяснять химию на арабском, нужна корректировка кода, как на SO и дают ответы.
    – Vovvka
    16 окт 2020 в 13:31

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.