动态添加和更新下拉选择菜单(错误)

时间:2018-10-09 09:39:23

标签: javascript jquery html bootstrap-4 bootstrap-modal

我希望这段代码可以帮助人们尝试做同样的事情,但是,我有一个小错误需要帮助。

我的下拉菜单中有一个按钮,可打开一个模式以向数据库中添加新项(然后进入下拉菜单)。我的代码成功添加了项目,但是“添加”按钮消失了。

添加之前:

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();
    }
});

0 个答案:

没有答案