Как сделать 2 и более Связанных списка с помощью AJAX?

Question

[именно самое]

Нужно сделать зависимые списки с помощью технологии AJAX но проблема заключается что нужно испольховать технологию аякс, после формирования страници.

На примере у меня выглядит так.

$('#selectTerritory').change(function(){
            var selectTerritory= $(this).val();
            $.ajax({
               type : "POST",
                url: "registration.php",
                // beforesend:(presend()),
                data: {Territory:selectTerritory},
                success: function (data) {
                    $('#detale').html(data);
                }
            });
           
        });
    
        $('#selectRayons').change(function () {
            var selectRayons = $(this).val();
            $.ajax({
                type: "POST",
                url: "registration.php",
                // beforesend:(presend()),
                data: {Rayons: selectRayons},
                success: function (data) {
                    $('#detale').html(data);
                }
            });
        });

<select id="selectTerritory" title="Выберите область"  name="Territory"  required>
              <option value="">Выберете область</option>
            <?php  $plase->getReg_id(); ?>
          </select>
        <br/>
        
        <div id="detale"></div>

echo "<br>";
        echo "<select id='selectRayons'  name='Rayons'>";
        while($row = $result->fetch_assoc()){
            echo "<option value=".mb_substr($row['ter_name'], 0,7).">".$row['ter_name']."</option>";
        } ;
        echo "</select>";
        echo "<br>";

$_POST['Rayons'] в которм должно лежать переданное значение с помощью аякса пустое!
Подскажите как тут быть. и в ччем ошибка?

Answer 1

[leni_m]

У вас районы появляются после выбора территории? Если так, то

$('body').on('change', '#selectRayons', function () {
            var selectRayons = $(this).val();
            $.ajax({
                type: "POST",
                url: "registration.php",
                // beforesend:(presend()),
                data: {Rayons: selectRayons},
                success: function (data) {
                    $('#detale').html(data);
                }
            });
        });

У вас скрипт не срабатывает, так как при полной загрузке на странице еще нет районов, и скрипту не повесить change на несуществующий элемент, а body есть всегда)

Comments

[именно самое]

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

Один раз выполнился запрос на основании этого запроса посылаются двое данных в пост.
Эти данные можно объединить в один аякс запрос или нужно разделять аякс запросы каким то макаром?

не пойму как отослать данные Territory:selectTerritory,Rayons: selectRayons одновременно??

[leni_m]

именно самое: чтобы послать один запрос - надо иметь сразу все данные. Если вы всетаки хотите, чтобы юзер поочереди вводил данные, то можно написать на js что-то типа: данные получены, отображаем следующий селект. И когда все данные будут заполнены, то отправляем один запрос. в jquery есть одна из функций .append(), которая может добавлять html код, и .remove() которая может его удалять)
Вам бы примеры с этими функциями погуглить.

[leni_m]

именно самое: и вообще по своему опыту скажу php лучше не нагружать версткой, т.к. это может делать js, и уберегает сервер от дополнительных задач.

[именно самое]

leni_m: а еще бы лучше поучиться где то на курсах по JS. А то не овсем уловлю ход дейсвий в JS.

[leni_m]

именно самое: да я сам не особо шарю
Jquery вот чутка знаю тип $(элемент) и дальше производим с ним действия, в основном у меня это .on('и тут click или change или еще че-нить'), ну и там append() remove() вот впринципе и все))) а так, что не знаю как сделать гуглю. И вроде бы дело идет, потихонечку да узнаю что-нибудь.
А вот учебник начинал палить , но времени сейчас чет не найти продолжить, так что на практике считай изучаю)

[именно самое]

leni_m: спасибо