Как выбрать вариант ввода после завершения второго AJAX, JQuery

Question

Я загружаю данные из mysql в php с помощью ajax.Я хочу создать функцию редактирования для моего сайта.Это редактирование будет модальным.Выбор ввода с параметрами (подкатегориями) загружается с помощью ajax после загрузки категорий радиовходов с предыдущим ajax.

Я пробовал несколько событий jquery для изменения выбора, но никто не работал.Это код скрипта в моем модальном файле.

<script>    
    $(document).ajaxComplete(function() {
        $("#editexp'.$poz.'").on("shown.bs.modal", function(){
            $("input[name=payment'.$poz.'][value='.$method.']").prop("checked", true);

            $("input[name=kategoria'.$poz.'][value='.$catid.']").prop("checked", true);

            var category = '.$catid.';
            var poz = '.$poz.';
            $.ajax({
                url:"expense_subcategory_change.php",
                method:"POST",
                data:{category:category,
                    poz:poz
                },
                success:function(data){
                    $("#subcategory'.$poz.'").html(data);
                }
            });

            $("input[type=radio][name=kategoria'.$poz.']").change(function(){

                var category = $(this).val();
                var poz = '.$poz.';
                $.ajax({
                    url:"expense_subcategory_change.php",
                    method:"POST",
                    data:{category:category,
                        poz:poz
                    },
                    success:function(data){
                        $("#subcategory'.$poz.'").html(data);
                    }
                });
            });


        });
    });

    $("#subcategory'.$poz.'").ajaxComplete(function() {
         $("#subcategory'.$poz.' ").find("option").each( function() {
              var $this = $(this);
              if ($this.val() == '.$subcatid.') {
                 $this.prop("selected","selected");
                 return false;
              }
         });
    });
</script>

Я также пробовал это:

    $("#subcategory'.$poz.'").ajaxComplete(function() {
          $("#subcategory'.$poz.' option[value='.$subcatid.']").prop("selected","selected");
    });

также эти две функции без ajaxComplete для #subcategory или со вторым ajaxComplete для документа

Ввод с опциями загружается, но всегда выбирается первая опция.

Это основная часть моего кода расхода_подкатегории:

$result = mysqli_query($connection,"$sql_query");

$output .= '<select class="mb-3 w-50-100 " name="subcategory'.$poz.'">';

while($row = mysqli_fetch_array($result))
{
    $output .= '<option value="'.$row['id'].'" >'.$row['sub'].'</option>';  
}

$output .= '</select>';

echo $output;

Answer 1

Если вы используете какое-либо событие.Попробуйте связать это событие в своей функции.Так что каждый раз событие связывается.После стрельбы.

Answer 2

Проблема в вашем селекторе.Вы используете 'name' в элементе select, но используете '#' (id) для поиска элемента в dom.Измените ваш PHP-код на:

$output .= '<select class="mb-3 w-50-100 " id="subcategory'.$poz.'">';

И я проверил второй метод, который вы предоставили, поскольку он казался чище

$("#subcategory'.$poz.' option[value='.$subcatid.']").prop("selected","selected");

Смотрите решение (упрощенный код), работающее здесь https://jsfiddle.net/79kugn60/