无法在下拉列表中填充数据库列

Cannot populate database column in dropdown

这个问题让我想起几年前我问的一个问题:

这是成功填充下拉列表 id #namelist:

的 jQuery 函数
$('#edituserModal').on('show.bs.modal', function (e) {
    initializeSelect($('#namelist'), 'assets/process/getNames.php', function (item) { 
        return {
            value: item.name,
            text: item.name
        }
    }); 
});

上面的代码在此处成功填充了 HTML 下拉列表 select:

<select id="namelist">
</select>

这是创建数据表的代码:

$('#datatable').DataTable({
    "searching": true,
    "paging": true,
    "serverSide": false,
    "type": "POST", 
    "ajax": {
        "url": "assets/process/getusers.php", 
        "dataSrc": ""
    },
    "columns": 
    [
        { "data": "null",
          "render": function ( data, type, row, meta )
          {
            return "<i class='far fa-edit editUser' 
                    title='Edit User' data-editdeptrepname='"+row.name+"'></i>";
          }
        },
        {"data": "username"},
        // few more columns
    ]
});

用户点击带有 class .editUser 的图标。 onClick 事件在这里:

$('#datatable').on('click', 'tr > td > .editUser', function(e){
  e.preventDefault();
  var $dataTable = $('#datatable').DataTable();
  var tr = $(this).closest('tr');
  var rowData = $dataTable.row(tr).data();

  var name = $(this).attr('data-name');

  $('#namelist').val(name);
  // $('#namelist').val(rowData.name); // <-- I tried this
  // $('#namelist').val(rowData.name).text(rowData.name); // <-- also tried this
  // $('#namelist option:first').val(rowData.name).text(rowData.name);  // <-- this too
  // $('#namelist option:first').val(name); // <-- this as well

  $('#edituserModal').modal('show');
});

如上所述,下拉列表中填充了一个名称列表。当用户打开模式时,应该出现在下拉列表中的名字应该是数据库中保存的任何名称。

问题是,在模式中,下拉列表最初不显示数据库中保存的名称。下拉列表仍会显示所有 select 可用的名称选项,但最初应该显示的是保存在数据库中的名称。

正如您将在最后一段代码中看到的那样,我已经尝试了几种方法来使其工作,但都无济于事。

这是模式打开后下拉菜单的图片。它应该首先读取当前保存在数据库中的名称。我可以单击下拉菜单,它会显示完整的名称列表。但我需要它来初始显示保存的名称:

我到底错过了什么?我已经这样做了一百次,直到现在我都没有失败过。

这里是:

 $('#datatable').on('click', 'tr > td > .editUser', function(e){
    e.preventDefault();

    // Here is where sould go your initializeSelect call
    initializeSelect($('#namelist'), 'assets/process/getNames.php', function (item) { 
        return {
            value: item.name,
            text: item.name
        }
    }); 

    var row = $(this).parent().parent();
    name = row[0].cells[0].innerText;
    $('#namelist option:first').val(name).text(name);

    $('#edituserModal').modal('show');
});

通过这样做,您不再需要模态显示事件侦听器。

希望对您有所帮助。