Бесконечный l oop с 2 синхронизированными событиями изменения

Question

У меня есть форма с 2 выборами из библиотеки select2. В одной области есть некоторые идентификационные коды из некоторых процедур, а в другой у меня есть описания этих процедур. Что мне нужно, когда я выбираю идентификатор или описание, то другое поле заполняется автоматически. Однако это приводит к бесконечному l oop. Кто-нибудь знает, как решить эту проблему? Ниже приведен мой код:

Мой выбор:

<select class="select2-single form-control cdtuss" name="" id="cdTuss_0">
    <option value="">Search TUSS Code</option>
</select>
    .
    .
    .
<select id="procedimento_0" class="select2-single form-control" th:field="*{empresa.procedimentos[0].descricao}" required>
    <option value="">Search procedure</option>
</select>

После следующего фрагмента кода у меня есть запрос AJAX, где я получаю данные из своего API для отображения в выберите параметры. Обратите внимание, что у меня есть эти 2 массива в начале. Причина в том, что для этого компонента select2 нужны данные в следующем формате (где id будет значением из тега option, а text - отображаемый текст):

data: [
    { 
        id: 1,
        text: value_you_want_to_display_as_select_option
    },
    { 
        id: 2,
        text: value_you_want_to_display_as_select_option2
    },
]

Итак, в одном массиве мое текстовое свойство от объектов получает описание процедуры, в другом массиве то же текстовое свойство от объектов получает код TUSS.

var listProcedures = [];
var listProceduresTuss = [];
$("#procedimento_0").select2({
    ajax: {
        url: 'http://localhost:8080/credenciamento/busca-procedimentos/',
        dataType: 'json',
        delay: 500,
        data: function (params) {
            if (params.term !== null && params.term !== undefined) {
                return {
                    q: params.term.toLowerCase(), // search term
                };
            } else {
                return {
                    q: params.term
                }
            }
        },
        processResults: function (response) {
            let procedures = [];
            for (let i = 0; i < response.length; i++) {
                procedures.push({
                    id: response[i].id, 
                    text: response[i].descricao,
                    tuss: response[i].codigoTuss,
                    valorPreferencial: response[i].valorPreferencial                            
                })
            }
            listProcedures = procedures;

            return { results: procedures }
        },
        cache: true,
    },
});

$("#cdTuss_0").select2({
    ajax: {
        url: 'http://localhost:8080/credenciamento/busca-procedimentos/tuss',
        dataType: 'json',
        delay: 500,
        data: function (params) {   
            return {
                q: params.term
            }
        },
        processResults: function (response) {
            let procedures = [];
            for (let i = 0; i < response.length; i++) {
                procedures.push({
                    id: response[i].id, 
                    text: response[i].codigoTuss,
                    descricao: response[i].descricao,
                    valorPreferencial: response[i].valorPreferencial
                })
            }
            listProceduresTuss = procedures;
            console.log(listProceduresTuss);

            return { results: procedures }
        },
        cache: true,
    },
});

Здесь у меня есть прослушиватель событий. Каждый раз, когда я выбираю опцию (процедуру или код TUSS), она автоматически заполняет другое поле выбора. Учитывая, что я буду выбирать по описанию процедуры: я получаю выбранное значение ($ (this) .val (), которое соответствует идентификатору), затем перебираю соответствующий массив. Когда свойство объекта id из listProcedures совпадает с текущим идентификатором, я создаю новую опцию для заполнения выбора кода Tuss, который имеет тот же идентификатор, свойство text будет содержать значение methodList [i] .tuss. Мне нужно создать эту опцию, потому что запрос AJAX запускается, только если я нажимаю на кнопку выбора. Так что, если я ищу процедуру по ее описанию, я не нажму на tuss code select и, следовательно, она не будет иметь никаких данных. После этого она добавляет эту опцию в мой select, поле «vlrPreferencial», которое нормальный вводимый текст имеет измененное значение и выходит из l oop. После того, как он выходит из l oop, он меняет выбранное значение выбранного кода TUSS на то, которое я изначально выбрал в #ystem_0 select.

$("#procedimento_0").change(function() {
    let id = $(this).val();

    console.log(id);

    for (let i = 0; i < listProcedures.length; i++) {
        if (id === (listProcedures[i].id).toString()) {
            let procedure = new Option(listProcedures[i].tuss, listProcedures[i].id, listProcedures[i].valorPreferencial)
            $("#cdTuss_0").append(procedure).change();  
            $("#vlrPreferencial_0").val(listProcedures[i].valorPreferencial.toString());
            break;
        }       
    }
    $("#cdTuss_0").val(id);
    $("#cdTuss_0").change();
});

$("#cdTuss_0").change(function() {          
    let id = $(this).val();
    console.log(id);    
    for (let i = 0; i < listProceduresTuss.length; i++) {
        if (id === (listProceduresTuss[i].id).toString()) {
            let procedure = new Option(listProceduresTuss[i].descricao, listProceduresTuss[i].id, listProceduresTuss[i].valorPreferencial);
            $("#procedimento_0").append(procedure).change();
            $("#vlrPreferencial_0").val(listProceduresTuss[i].valorPreferencial.toString());
            break;
        }
    }
    $("#procedimento_0").val(id);
    $("#procedimento_0").change();
});

PS: я пытался проверить в начале каждой функции если другое поле пусто, если нет, то оно будет работать только при первом выборе параметра. После этого он больше не будет выполняться, поскольку поле, которое должно было быть заполнено автоматически, не пусто.