javascript - 如何在使用 shown.sb.modal 事件显示之前填充模式框 SELECT 表单控件

Question

我有一个简单的模式弹出窗口，用于编辑从后端检索到的项目。 for 有几个输入和选择控件。输入表单控件工作正常，但选择控件未按预期预填充。

我的函数的基本架构如下:

function BootboxEditItem(id) {

   $.ajax({
      // Load back end data
   })
   .done(function(data) {

       var itemData = data;

       $.ajax({

          // Load form template for modal
          url: '/modal/item/edit-item.html',
          ......
       })
       .success: function (data) ({

           var box = bootbox.confirm({

               // Set up bootbox buttons;
           },
           callback: function(result){

               // Post edited data back to the server
           }
       )};

       box.on("shown.bs.modal", function(e) {

           // Populate the modal here using data from the backend.
           // This is where the problem lies!
       })

       box.modal("show");
   });
}

下面是完整的 JavaScript 代码:

function BootboxEditItem(id) {

var itemDao = '';

$.ajax({

    type: "GET",
    contentType: "application/json",
    url: "/api/item/edit/" + id,
    dataType: "json",
    cache: false
})
.done(function (data) {

    itemDao = data;

    $.ajax({
        type: "GET",
        url: '/modal/item/item-edit-form.html',
        success: function (data) {

            console.log(itemDao);

            var box = bootbox.confirm({

                message: data,
                title: "Edit Item: [" + itemDao.item.sysId + "]",
                buttons: {
                    cancel: {
                        label: "Cancel",
                        className: "btn-danger btn-fixed-width-100"
                    },
                    confirm: {
                        label: "Save",
                        className: "btn-success btn-fixed-width-100"
                    }
                },
                callback: function (result) {



                }
            });

            box.on("shown.bs.modal", function(e) { 

                console.log(e.currentTarget);

                var selectItemLevel = document.getElementById('editItemLevel');

                console.log(selectItemLevel);

                $(selectItemLevel).empty();

                $.each(itemDao.itemLevels, function (key, index) {

                    var opt = document.createElement('option');

                    opt.value = index;
                    opt.innerHTML = 'Level ' + index;

                    selectItemLevel.appendChild(opt);
                });

                $(e.currentTarget).find('select[name="editItemLevel"]').val(selectItemLevel);
                $(e.currentTarget).find('input[name="editIdentifier"]').val(itemDao.item.identifier);
                $(e.currentTarget).find('textarea[name="editItemValue"]').val(itemDao.item.itemValue);

            });

            box.modal('show');
        }
    });
});
}

这是 HTML 文件的代码:

<form id="editItem" action="/api/items/save" method="post">

<input type="hidden" name="artifactId" id="artifactId" value="" />
<input type="hidden" name="editId" id="editId" value="" />
<input type="hidden" name="editSysId" id="editSysId" value="" />
<input type="hidden" name="editSortIndex" id="editSortIndex" value="" />

<div class="row">
    <div class="col-sm-6">
        <div class="form-group">
            <label for="editItemLevel">Item level:</label>
            <select class="form-control" id="editItemLevel" name="editItemLevel"></select>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="form-group">
            <label for="editItemClass">Item class:</label>
            <select class="form-control" id="editItemClass" name="editItemClass" onchange="itemEditClassChange();"></select>
        </div>
    </div>
</div>

<div class="row" id="editRequirementRow">
    <div class="col-sm-6">
        <div class="form-group">
            <label for="editItemType">Requirement type:</label>
            <select class="form-control" id="editItemType" name="editItemType"></select>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="form-group">
            <label for="createIdentTemplate">Identifier prefix:</label>
            <select class="form-control" id="editIdentTemplate" name="editIdentTemplate" onchange="itemEditIdentTemplateChange();"></select>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-sm-6">
        <div class="form-group">
            <label for="createMediaType">Media type:</label>
            <select class="form-control" id="editMediaType" name="editMediaType"></select>
        </div>
    </div>
    <div class="col-sm-6" id="editIdentField">
        <div class="form-group">
            <label for="editIdentifier">Identifier:</label>
            <input type="text" class="form-control" id="editIdentifier" name="editIdentifier" />
        </div>
    </div>
</div>

<div class="form-group">
    <label for="editItemValue">Item details:</label>
    <textarea class="form-control"  rows="5" cols="50" id="editItemValue" name="editItemValue"></textarea>
</div>

这是由 console.log() 打印的用于其中一个 SELECT 控件的输出；

<select class="form-control" id="editItemLevel" name="editItemLevel">
   <option value="1">Level 1</option>
   <option value="2">Level 2</option>
   <option value="3">Level 3</option>
   <option value="4">Level 4</option>
   <option value="5">Level 5</option>
   <option value="6">Level 6</option>
   <option value="7">Level 7</option>
   <option value="8">Level 8</option>
   <option value="9">Level 9</option>
   <option value="10">Level 10</option>

Answer 1

看来您的每个循环都没有正确附加 <option></option> .如果您有 chrome 开发人员工具并且知道如何使用它，请在此函数中放置一个断点并确保正在创建选择选项并将其添加到 DOM:

  $.each(itemDao.itemLevels, function (key, index) {
            var opt = document.createElement('option');
            opt.value = index;
            opt.innerHTML = 'Level ' + index;
            selectItemLevel.appendChild(opt); //breakpoint here
        });

此外，由于您已经在使用 jQuery，您可以像这样将它们添加到 DOM:

$.each(itemDao.itemLevels, function (key, index) {
      $(selectItemLevel).append('<option value="'+index+'">Level '+index+'</option>');

});