Динамически добавлять и обновлять выпадающее меню выбора (ошибка) - PullRequest
Новая
       15

Динамически добавлять и обновлять выпадающее меню выбора (ошибка)

0 голосов
/ 09 октября 2018

Я надеюсь, что этот код помогает людям, пытающимся сделать то же самое, однако, у меня есть небольшая ошибка, с которой мне нужна помощь.

У меня есть кнопка в раскрывающемся меню, которая открывает модальное окно для добавленияновый пункт в базе данных (затем в раскрывающемся меню).Мой код успешно добавляет элемент, однако кнопка «Добавить» затем исчезает.

Перед добавлением:

enter image description here

После добавления:

enter image description here

HTML: 

<!--Journal-->
    <li>
        <div class="pt-3 pb-0 px-4" id="journal">
            <select class="dropdown-select mt-0 journals_dropdown" id="journals_dropdown" required>
                <option value="" disabled selected>Select</option>
            </select>
            <button class="btn-save btn btn-primary btn-sm add_journal_button" data-toggle="modal" data-target="#add_journal_modal">Add</button>
        </div>
    </li>
<!--/Journal-->

JS: 

//===== Fill Journals Dropdown =====
function fill_journals() {
    $('#journals_dropdown').empty();

    //add items to dropdown
    for (var i=0; i<journals.length; i++) {
        $('#journals_dropdown').append($('<option></option>').val(journals[i]._id).html(journals[i].journal_name));
    }
    //$('#journal').append('<button class="btn-save btn btn-primary btn-sm add_journal_button" data-toggle="modal" data-target="#add_journal_modal">Add</button>');

    //select latest item from dropdown
    if(localStorage.getItem('latest_journal').length > 15) {
        $("#journals_dropdown").val(localStorage.getItem('latest_journal')).attr("selected","selected");
    }

}

Ошибка исходит из этого кода вJS (если я это закомментирую, кнопка не исчезнет): 

    //add items to dropdown
    for (var i=0; i<journals.length; i++) {
        $('#journals_dropdown').append($('<option></option>').val(journals[i]._id).html(journals[i].journal_name));
    }

PS.Если я обновляю страницу, fill_journals () работает как шарм.Я пытаюсь вызвать его, как только форма добавления нового журнала будет отправлена ​​следующим образом: 

$.ajax({
    url: '/add_journal',
    method: 'POST',
    contentType: 'application/json',
    data: JSON.stringify(data),
    success: function (response) {
        $('#add_journal_modal').modal('toggle');
        localStorage.setItem("latest_journal", response);
        initialize();   //fill_journals() is part of this
        // location.reload();
    }
});
...